Angular Academy · Lekcja

ngOnDestroy i sprzątanie

Zwalniaj zasoby po usunięciu komponentu.

ngOnDestroy i sprzątanie to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego sprzątanie jest ważne

Gdy komponent jest usuwany z DOM, pozostałe subskrypcje, timery lub nasłuchiwacze zdarzeń mogą powodować wycieki pamięci. Hak OnDestroy służy do ich sprzątania.

Implementowanie OnDestroy

Zaimplementuj OnDestroy i dodaj metodę ngOnDestroy. Angular wywołuje ją tuż przed zniszczeniem komponentu.

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

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

Anulowanie subskrypcji Observable

Subskrypcje tworzone ręcznie trzeba anulować, aby uniknąć wycieków. Przechowuj obiekt Subscription i wywołuj unsubscribe w ngOnDestroy.

private sub!: Subscription;

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

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

Zarządzanie wieloma subskrypcjami

Możesz zebrać subskrypcje w jednym nadrzędnym obiekcie Subscription i anulować je wszystkie naraz.

private subs = new Subscription();

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

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

Wzorzec takeUntil

Popularny wzorzec RxJS wykorzystuje Subject niszczenia wraz z takeUntil, dzięki czemu strumienie kończą działanie automatycznie po zniszczeniu komponentu.

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

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

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

Używanie takeUntilDestroyed

Współczesny Angular oferuje takeUntilDestroyed z pakietu @angular/core/rxjs-interop. Wiąże ono strumień z cyklem życia komponentu bez konieczności ręcznego sprzątania.

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

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

Alternatywa w postaci potoku async

Użycie potoku async w szablonie całkowicie eliminuje konieczność ręcznego tworzenia subskrypcji, ponieważ potok automatycznie anuluje subskrypcję podczas niszczenia komponentu.

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

Czyszczenie timerów i interwałów

Timery natywne nie są zarządzane przez Angulara. Czyść je w ngOnDestroy, aby zatrzymać wywołania zwrotne po zniszczeniu komponentu.

private id!: number;

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

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

Usuwanie nasłuchiwaczy zdarzeń

Jeśli ręcznie dodajesz nasłuchiwacze zdarzeń DOM, usuwaj je podczas niszczenia komponentu, aby zapobiec wyciekom i nieaktualnym procedurom obsługi.

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

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

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

DestroyRef dla wywołań zwrotnych

Możesz wstrzyknąć DestroyRef i zarejestrować wywołanie zwrotne onDestroy, co jest przydatne w usługach lub kontekstach innych niż komponenty.

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

Co wywołuje ngOnDestroy

ngOnDestroy jest uruchamiany, gdy komponent zostaje usunięty przez routing, dyrektywę strukturalną taką jak *ngIf lub gdy zostaje zniszczony jego komponent nadrzędny.

Szybkie sprawdzenie

Sprawdź swoją wiedzę o OnDestroy.

Podsumowanie

Hook OnDestroy służy do czyszczenia subskrypcji, timerów i listenerów. Używaj unsubscribe, wzorca takeUntil, takeUntilDestroyed, potoku async lub DestroyRef, aby zapobiegać wyciekom pamięci.

Często zadawane pytania

Czy lekcja „ngOnDestroy i sprzątanie” jest bezpłatna?

Tak — pełny tekst „ngOnDestroy i sprzątanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „ngOnDestroy i sprzątanie”?

Zwalniaj zasoby po usunięciu komponentu. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „ngOnDestroy i sprzątanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy