Angular Academy · Lektion

Afmelding og memory leaks

Undgå leaks med takeUntilDestroyed.

Lektion 3 af 413 trin

Afmelding og memory leaks er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Problemet med hukommelseslækager

Hvis du abonnerer på en langlivet Observable i en komponent og aldrig afmelder dig, fortsætter callbacken med at køre, efter komponenten er ødelagt. Det lækker hukommelse og kan medføre fejl eller dobbelt arbejde.

Manuel afmelding

Den grundlæggende løsning er at gemme Subscription-objektet og afmelde dig i ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

Håndtering af flere abonnementer

En enkelt Subscription kan samle underordnede abonnementer med .add(), hvorefter én unsubscribe() lukker dem alle ned.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular stiller takeUntilDestroyed() til rådighed, som automatisk fuldfører strømmen, når komponenten ødelægges — du behøver ikke længere manuel ngOnDestroy.

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

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

Krav til injektionskontekst

Når takeUntilDestroyed() kaldes uden argument, skal den køre i en injektionskontekst (for eksempel i konstruktøren). Uden for denne kontekst skal du sende en DestroyRef eksplicit.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

takeUntil-mønsteret (klassisk)

Før takeUntilDestroyed brugte standardmønsteret et Subject, der udsender en værdi i ngOnDestroy.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Strømme, der fuldføres, kræver ingen oprydning

HttpClient-anmodninger udsender én gang og fuldføres derefter, så de rydder selv op. Du behøver normalt ikke afmelde dig fra et enkelt HTTP-kald — selvom takeUntilDestroyed stadig er sikkert at bruge.

Den asynkrone pipe klarer det for dig

Den bedste tilgang til skabeloner er at lade async-pipen abonnere og afmelde automatisk. Vi gennemgår den i næste lektion.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

Tegn på en abonnementslækage

Dublerede netværksanmodninger, håndteringer, der kører efter navigation, voksende hukommelsesforbrug i udviklerværktøjerne eller fejl som "Cannot read property of destroyed view" peger ofte på glemte afmeldinger.

toSignal rydder også automatisk op

Når du konverterer en Observable til et signal med toSignal(), afmeldes der også automatisk, når den kontekst, der ejer signalet, ødelægges.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

Valg af tilgang

Foretræk async-pipen eller toSignal i skabeloner, brug takeUntilDestroyed() til manuelle abonnementer, og brug kun en samling af Subscription-objekter som nødløsning, når det er nødvendigt.

Hurtigt tjek

Test din forståelse af afmelding.

Besvar den i den interaktive lektion

Opsummering: Afmelding og hukommelseslækager

Luk altid langvarige abonnementer ned.

takeUntilDestroyed() fuldfører automatisk ved ødelæggelse.
async-pipen og toSignal() håndterer abonnementer for dig.
Enkeltstående HTTP-kald fuldføres af sig selv.

Næste: async-pipen i dybden.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Afmelding og memory leaks” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Afmelding og memory leaks”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Afmelding og memory leaks”?

Undgå leaks med takeUntilDestroyed. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Afmelding og memory leaks”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy