Angular Academy · Les

ngOnDestroy en opruimen

Geef resources vrij wanneer een component wordt verwijderd.

Les 3 van 413 stappen

ngOnDestroy en opruimen is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Waarom opruimen belangrijk is

Wanneer een component uit de DOM wordt verwijderd, kunnen achterblijvende abonnementen, timers of gebeurtenislisteners geheugenlekken veroorzaken. De OnDestroy-hook is de aangewezen plek om deze op te ruimen.

OnDestroy implementeren

Implementeer OnDestroy en voeg een methode ngOnDestroy toe. Angular roept deze aan vlak voordat de component wordt vernietigd.

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

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

Abonnementen op Observables opzeggen

Handmatige abonnementen moeten worden opgezegd om lekken te voorkomen. Bewaar de Subscription en roep unsubscribe aan in ngOnDestroy.

private sub!: Subscription;

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

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

Meerdere abonnementen beheren

Je kunt abonnementen verzamelen in één bovenliggend Subscription-object en ze allemaal tegelijk opzeggen.

private subs = new Subscription();

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

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

Het takeUntil-patroon

Een populair RxJS-patroon gebruikt een destroy-Subject met takeUntil, zodat streams automatisch worden voltooid wanneer de component wordt vernietigd.

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

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

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

takeUntilDestroyed gebruiken

Moderne versies van Angular bieden takeUntilDestroyed uit @angular/core/rxjs-interop. Hiermee wordt een stream aan de levenscyclus van de component gekoppeld zonder handmatig opruimwerk.

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

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

Het alternatief met de async-pipe

Door de pipe async in de template te gebruiken, vermijd je handmatige abonnementen volledig, omdat het abonnement automatisch wordt opgezegd bij vernietiging.

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

Timers en intervallen wissen

Timers van het platform worden niet door Angular beheerd. Wis ze in ngOnDestroy om te voorkomen dat callbacks na de vernietiging worden uitgevoerd.

private id!: number;

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

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

Gebeurtenislisteners verwijderen

Als je handmatig DOM-listeners toevoegt, verwijder ze dan bij vernietiging om lekken en verouderde handlers te voorkomen.

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

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

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

DestroyRef voor callbacks

Je kunt DestroyRef injecteren en een onDestroy-callback registreren. Dit is nuttig in services of contexten die geen component zijn.

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

Wat ngOnDestroy activeert

ngOnDestroy wordt uitgevoerd wanneer een component door routing, een structurele directive zoals *ngIf of doordat de bovenliggende component wordt vernietigd, wordt verwijderd.

Korte controle

Test uw begrip van OnDestroy.

Beantwoord dit in de interactieve les

Samenvatting

De OnDestroy-hook ruimt abonnementen, timers en luisteraars op. Gebruik unsubscribe, het takeUntil-patroon, takeUntilDestroyed, de async-pipe of DestroyRef om geheugenlekken te voorkomen.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “ngOnDestroy en opruimen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “ngOnDestroy en opruimen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “ngOnDestroy en opruimen”?

Geef resources vrij wanneer een component wordt verwijderd. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “ngOnDestroy en opruimen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy