Angular Academy · leksjon

ngOnDestroy og opprydding

Frigjør ressurser når en komponent fjernes.

Leksjon 3 av 413 trinn

ngOnDestroy og opprydding er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hvorfor opprydding er viktig

Når en komponent fjernes fra DOM-en, kan abonnementer, tidsur eller hendelseslyttere som blir liggende igjen, føre til minnelekkasjer. OnDestroy-hooken er stedet der De rydder dem opp.

Implementere OnDestroy

Implementer OnDestroy og legg til en ngOnDestroy-metode. Angular kaller den rett før komponenten ødelegges.

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

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

Avslutte abonnementer på Observables

Manuelle abonnementer må avsluttes for å unngå lekkasjer. Lagre Subscription-objektet og kall unsubscribe i ngOnDestroy.

private sub!: Subscription;

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

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

Administrere flere abonnementer

De kan samle abonnementer i ett overordnet Subscription-objekt og avslutte alle samtidig.

private subs = new Subscription();

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

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

Mønsteret takeUntil

Et populært RxJS-mønster bruker et destroy-Subject sammen med takeUntil, slik at strømmer fullføres automatisk når komponenten ødelegges.

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

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

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

Bruke takeUntilDestroyed

Moderne Angular tilbyr takeUntilDestroyed fra @angular/core/rxjs-interop. Det knytter en strøm til komponentens livssyklus uten at De må rydde opp manuelt.

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

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

Alternativet async Pipe

Ved å bruke async-pipen i malen unngår De manuelle abonnement helt, siden abonnementet avsluttes automatisk når komponenten ødelegges.

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

Fjerne tidsur og intervaller

Opprinnelige tidsur håndteres ikke av Angular. Fjern dem i ngOnDestroy for å hindre at tilbakekall kjøres etter destruksjonen.

private id!: number;

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

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

Fjerne hendelseslyttere

Hvis De legger til DOM-lyttere manuelt, må De fjerne dem når komponenten ødelegges for å hindre lekkasjer og foreldede behandlere.

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

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

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

DestroyRef for tilbakekall

De kan injisere DestroyRef og registrere et onDestroy-tilbakekall, noe som er nyttig i tjenester eller kontekster som ikke er komponenter.

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

Hva utløser ngOnDestroy

ngOnDestroy kjører når en komponent fjernes av routing, en strukturell direktiv som *ngIf, eller når den overordnede komponenten blir ødelagt.

Kort test

Test forståelsen Deres av OnDestroy.

Besvar den i den interaktive leksjonen

Oppsummering

OnDestroy-hooken rydder opp i abonnementer, tidtakere og lyttere. Bruk unsubscribe, takeUntil-mønsteret, takeUntilDestroyed, async-pipen eller DestroyRef for å forhindre minnelekkasjer.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «ngOnDestroy og opprydding» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «ngOnDestroy og opprydding», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «ngOnDestroy og opprydding»?

Frigjør ressurser når en komponent fjernes. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «ngOnDestroy og opprydding»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy