Poznaj DestroyRef!

DestroyRef został wprowadzony w Angular 16 (commit link) i daje nam możliwość uruchomienia callback’a, gdy komponent/dyrektywa lub powiązany injector zostanie zniszczony.

Zobaczmy prosty przykład, aby zrozumieć, jak możemy tego użyć.

Callback, gdy komponent jest niszczony

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

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: ``,
})
export default class DashboardComponent {
  constructor() {
    interval(1000).subscribe((value) => {
      console.log(value);
    });
  }
}

import { Component } from '@angular/core';

import { interval } from 'rxjs';

@Component({

selector: 'app-dashboard',

standalone: true,

})

export default class DashboardComponent {

constructor() {

interval(1000).subscribe((value) => {

console.log(value);

});

}

Powyższy kod emituje nową wartość co 1 sekundę (1000 ms) i wyrzuca ją do konsoli. Ten niewielki fragment kodu nadal powoduje wyciek pamięci, ponieważ nie niszczymy subskrypcji.

Odpowiedzmy na kilka pytań.

P: Co się stanie, jeśli znawigujemy się do innego route’a?

O: Cóż, komponent zostanie zniszczony.

P: Co by się stało, gdybyśmy wrócili na tę trasę?

O: Cóż, komponent zostanie skonstruowany ponownie.

Pomimo zniszczenia komponentu, subskrypcja pozostaje aktywna.

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

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: ``,
})
export default class DashboardComponent implements OnDestroy {
  #subscription?: Subscription;
  constructor() {
    this.#subscription = interval(1000).subscribe((value) => {
      console.log(value);
    });
  }
  
  ngOnDestroy(): void {
    this.#subscription?.unsubscribe();
  }
}

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

import { Subscription, interval } from 'rxjs';

@Component({

selector: 'app-dashboard',

standalone: true,

})

export default class DashboardComponent implements OnDestroy {

#subscription?: Subscription;

constructor() {

this.#subscription = interval(1000).subscribe((value) => {

console.log(value);

});

}

ngOnDestroy(): void {

this.#subscription?.unsubscribe();

}

Musimy anulować subskrypcję, aby uniknąć wycieku pamięci. Ale prawdopodobnie już o tym wiesz i stosujesz się do tego w praktyce 👍
Zróbmy teraz to samo, ale tym razem używając DestroyRef zamiast hook’a OnDestroy

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

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: ``,
})
export default class DashboardComponent {
  #subscription?: Subscription;
  #destroyRef = inject(DestroyRef);

  constructor() {
    this.#subscription = interval(1000).subscribe((value) => {
      console.log(value);
    });

    this.#destroyRef.onDestroy(() => {
      this.#subscription?.unsubscribe();
    });
  }
}

import { Component, DestroyRef, inject } from '@angular/core';

import { Subscription, interval } from 'rxjs';

@Component({

selector: 'app-dashboard',

standalone: true,

})

export default class DashboardComponent {

#subscription?: Subscription;

#destroyRef = inject(DestroyRef);

constructor() {

this.#subscription = interval(1000).subscribe((value) => {

console.log(value);

});

this.#destroyRef.onDestroy(() => {

this.#subscription?.unsubscribe();

});

}

Przejdźmy przez ten kod po kolei:

Tworzymy instancję #destroyRef przy użyciu metody inject (należy pamiętać, że może to robić tylko wewnątrz tzw. injection context).
Rejestrujemy callback w metodzie onDestroy. Podana funkcja zostanie wykonana, gdy komponent zostanie zniszczony.

Alternatywnie, moglibyśmy napisać to w ten sposób:

export default class DashboardComponent {
  #subscription?: Subscription;

  constructor() {
    this.#subscription = interval(1000).subscribe((value) => {
      console.log(value);
    });

    inject(DestroyRef).onDestroy(() => {
      this.#subscription?.unsubscribe();
    });
  }
}

export default class DashboardComponent {

#subscription?: Subscription;

constructor() {

this.#subscription = interval(1000).subscribe((value) => {

console.log(value);

});

inject(DestroyRef).onDestroy(() => {

this.#subscription?.unsubscribe();

});

}

Zauważ, że tym razem używamy funkcji inject w konstruktorze. To nadal działa dobrze, ponieważ ciało konstruktora zawiera się również w injection context’cie.

Istnieje jednak lepszy sposób na zamknięcie subskrybcji, bądź cierpliwa/y! 🙂

TakeUntilDestroyed

Zanim przejdziemy do tego lepszego sposobu, zaimplementujmy customową metodę myTakeUntilDestroyed.

export default class DashboardComponent {
  #subscription?: Subscription;

  myTakeUntilDestroyed() {
    inject(DestroyRef).onDestroy(() => {
      this.#subscription?.unsubscribe();
    });
  }

  constructor() {
    this.#subscription = interval(1000).subscribe((value) => {
      console.log(value);
    });

    this.myTakeUntilDestroyed();
  }
}

export default class DashboardComponent {

#subscription?: Subscription;

myTakeUntilDestroyed() {

inject(DestroyRef).onDestroy(() => {

this.#subscription?.unsubscribe();

});

}

constructor() {

this.#subscription = interval(1000).subscribe((value) => {

console.log(value);

});

this.myTakeUntilDestroyed();

}

Stworzyłem metodę myTakeUntilDestroyed, która wstrzykuje DestroyRef. Ważne jest, aby zrozumieć, że nie możemy użyć metody inject poza injection context’em. W powyższym przykładzie wywołuję myTakeUntilDestroyed z konstruktora, co działa poprawnie.

Injection Context: Konstruktor, pola klasy, factory function -> Czytaj więcej

Co by się stało, gdybyśmy wywołali metodę z hook’a ngOnInit?

export default class DashboardComponent implements OnInit {
  #subscription?: Subscription;

  myTakeUntilDestroyed() {
    inject(DestroyRef).onDestroy(() => {
      this.#subscription?.unsubscribe();
    });
  }

  constructor() {
    this.#subscription = interval(1000).subscribe((value) => {
      console.log(value);
    });
  }

  ngOnInit(): void {
    this.myTakeUntilDestroyed();
  }
}

export default class DashboardComponent implements OnInit {

#subscription?: Subscription;

myTakeUntilDestroyed() {

inject(DestroyRef).onDestroy(() => {

this.#subscription?.unsubscribe();

});

}

constructor() {

this.#subscription = interval(1000).subscribe((value) => {

console.log(value);

});

}

ngOnInit(): void {

this.myTakeUntilDestroyed();

}

Ponieważ nie jesteśmy w injection context’cie, Angular zgłosi błąd.

Jeśli chcielibyśmy wywołać myTakeUntilDestroyed z hook’a ngOnInit, powinniśmy zmienić sposób dostępu do DestroyRef.

myTakeUntilDestroyed(destroyRef?: DestroyRef) {
    (destroyRef ?? inject(DestroyRef)).onDestroy(() => {
      this.#subscription?.unsubscribe();
    });
  }

myTakeUntilDestroyed(destroyRef?: DestroyRef) {

(destroyRef ?? inject(DestroyRef)).onDestroy(() => {

this.#subscription?.unsubscribe();

});

}

Zmiana ta pozwala na użycie myTakeUntilDestroyed poza kontekstem wstrzykiwania, np, w hook’u OnInit.

export default class DashboardComponent implements OnInit {
  #subscription?: Subscription;
  #destroyRef = inject(DestroyRef);

  myTakeUntilDestroyed(destroyRef?: DestroyRef) {
    (destroyRef ?? inject(DestroyRef)).onDestroy(() => {
      this.#subscription?.unsubscribe();
    });
  }

  constructor() {
    this.#subscription = interval(1000).subscribe((value) => {
      console.log(value);
    });
  }

  ngOnInit(): void {
    this.myTakeUntilDestroyed(this.#destroyRef);
  }
}

export default class DashboardComponent implements OnInit {

#subscription?: Subscription;

#destroyRef = inject(DestroyRef);

myTakeUntilDestroyed(destroyRef?: DestroyRef) {

(destroyRef ?? inject(DestroyRef)).onDestroy(() => {

this.#subscription?.unsubscribe();

});

}

constructor() {

this.#subscription = interval(1000).subscribe((value) => {

console.log(value);

});

}

ngOnInit(): void {

this.myTakeUntilDestroyed(this.#destroyRef);

}

Bazując na tym czego dowiedzieliśmy się implementując metodę myTakeUntilDestroyed , możemy przejść do docelowego rozwiązania, tj. rxjs’owego operatora takeUntilDestroyed.

takeUntilDestroyed kończy subskrybcję, gdy komponent/dyrektywa zostanie zniszczona lub gdy przekazany do niej injector zostanie zniszczony.

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

export default class DashboardComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe((value) => {
        console.log(value);
      });
  }
}

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

export default class DashboardComponent {

constructor() {

interval(1000)

.pipe(takeUntilDestroyed())

.subscribe((value) => {

console.log(value);

});

}

Osiągnęliśmy to samo z czytelniejszym kodem i wykorzystaniem istniejącego operatora. Ale co jeśli chcemy go użyć w hook’u ngOnInit?

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

export default class DashboardComponent implements OnInit {
  #destroyRef = inject(DestroyRef);

  ngOnInit(): void {
    interval(1000)
      .pipe(takeUntilDestroyed(this.#destroyRef))
      .subscribe((value) => {
        console.log(value);
      });
  }
}

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

export default class DashboardComponent implements OnInit {

#destroyRef = inject(DestroyRef);

ngOnInit(): void {

interval(1000)

.pipe(takeUntilDestroyed(this.#destroyRef))

.subscribe((value) => {

console.log(value);

});

}

Jeśli musimy użyć operatora takeUntilDestroyed poza injection context’em, my (programiści) jesteśmy odpowiedzialni za dostarczenie DestroyRef jako parametru, analogiczniej jak w naszej customowej metodzie myTakeUntilDestroyed.

Jeśli lubisz oglądać filmy, koniecznie obejrzyj ten, który obejmuje przydatne informacje o DestroyRef > Obejrzyj teraz

Przydatne linki:

Kod i dokumentacja takeUntilDestroyed
Dokumentacja metody wstrzykiwania
Dokumentacja DestroyRef

Dzięki za przeczytanie mojego artykułu!

O autorze

Dodaj komentarz Anuluj pisanie odpowiedzi