Angular Academy · Leçon

ngOnDestroy et nettoyage

Libérez les ressources lorsqu’un composant est supprimé.

ngOnDestroy et nettoyage est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Pourquoi le nettoyage est important

Lorsqu'un composant est supprimé du DOM, les abonnements, minuteries ou écouteurs d'événements persistants peuvent provoquer des fuites mémoire. Le hook OnDestroy est l'endroit où vous les nettoyez.

Implémenter OnDestroy

Implémentez OnDestroy et ajoutez une méthode ngOnDestroy. Angular l'appelle juste avant la destruction du composant.

import { Component, OnDestroy } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnDestroy {
  ngOnDestroy(): void {
    console.log("cleaning up");
  }
}

Se désabonner des Observables

Les abonnements manuels doivent être résiliés pour éviter les fuites. Stockez la Subscription et appelez unsubscribe dans ngOnDestroy.

private sub!: Subscription;

ngOnInit() {
  this.sub = this.timer$.subscribe(t => this.tick = t);
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

Gérer plusieurs abonnements

Vous pouvez regrouper les abonnements dans une seule Subscription parente et tous les résilier en une fois.

private subs = new Subscription();

ngOnInit() {
  this.subs.add(this.a$.subscribe());
  this.subs.add(this.b$.subscribe());
}

ngOnDestroy() {
  this.subs.unsubscribe();
}

Le schéma takeUntil

Un schéma RxJS courant utilise un Subject de destruction avec takeUntil afin que les flux se terminent automatiquement lorsque le composant est détruit.

private destroy$ = new Subject<void>();

ngOnInit() {
  this.data$.pipe(takeUntil(this.destroy$))
    .subscribe(d => this.data = d);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Utiliser takeUntilDestroyed

Les versions modernes d'Angular proposent takeUntilDestroyed depuis @angular/core/rxjs-interop, qui lie un flux au cycle de vie du composant sans nettoyage manuel.

import { takeUntilDestroyed } from "@angular/core/rxjs-interop";

constructor() {
  this.data$.pipe(takeUntilDestroyed())
    .subscribe(d => this.data = d);
}

L'alternative du pipe async

Utiliser le pipe async dans le modèle évite complètement les abonnements manuels, puisqu'il se désabonne automatiquement lors de la destruction.

<p>{{ data$ | async }}</p>

Effacer les minuteries et les intervalles

Les minuteries natives ne sont pas gérées par Angular. Effacez-les dans ngOnDestroy pour empêcher l'exécution de rappels après la destruction.

private id!: number;

ngOnInit() {
  this.id = window.setInterval(() => this.tick(), 1000);
}

ngOnDestroy() {
  clearInterval(this.id);
}

Supprimer les écouteurs d'événements

Si vous ajoutez manuellement des écouteurs DOM, supprimez-les lors de la destruction afin d'éviter les fuites et les gestionnaires obsolètes.

private onScroll = () => this.handle();

ngOnInit() {
  window.addEventListener("scroll", this.onScroll);
}

ngOnDestroy() {
  window.removeEventListener("scroll", this.onScroll);
}

DestroyRef pour les rappels

Vous pouvez injecter DestroyRef et enregistrer un rappel onDestroy, ce qui est utile dans les services ou les contextes qui ne sont pas des composants.

constructor(private destroyRef: DestroyRef) {
  const id = setInterval(() => {}, 1000);
  this.destroyRef.onDestroy(() => clearInterval(id));
}

Ce qui déclenche ngOnDestroy

ngOnDestroy s’exécute lorsqu’un composant est supprimé par le routage, par une directive structurelle comme *ngIf ou lorsque son parent est détruit.

Vérification rapide

Testez votre compréhension de OnDestroy.

Récapitulatif

Le crochet OnDestroy nettoie les abonnements, les minuteurs et les écouteurs. Utilisez unsubscribe, le modèle takeUntil, takeUntilDestroyed, le tube async ou DestroyRef pour éviter les fuites de mémoire.

Questions Fréquemment Posées

La leçon « ngOnDestroy et nettoyage » est-elle gratuite ?

Oui — le texte complet de « ngOnDestroy et nettoyage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « ngOnDestroy et nettoyage » ?

Libérez les ressources lorsqu’un composant est supprimé. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « ngOnDestroy et nettoyage » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy