Pengait siklus hidup OnDestroy tersedia di penyedia. Menurut dokumen:
Pengait siklus hidup yang dipanggil saat perintah, pipa, atau layanan dimusnahkan.
Berikut contohnya :
@Injectable()
class Service implements OnDestroy {
ngOnDestroy() {
console.log('Service destroy')
}
}
@Component({
selector: 'foo',
template: `foo`,
providers: [Service]
})
export class Foo implements OnDestroy {
constructor(service: Service) {}
ngOnDestroy() {
console.log('foo destroy')
}
}
@Component({
selector: 'my-app',
template: `<foo *ngIf="isFoo"></foo>`,
})
export class App {
isFoo = true;
constructor() {
setTimeout(() => {
this.isFoo = false;
}, 1000)
}
}
Perhatikan bahwa kode di atas Service
adalah sebuah instance milik Foo
komponen, sehingga dapat dimusnahkan jika Foo
dimusnahkan.
Untuk penyedia yang termasuk dalam root injector, hal ini akan terjadi pada penghancuran aplikasi, hal ini berguna untuk menghindari kebocoran memori dengan beberapa bootstrap, misalnya dalam pengujian.
Ketika penyedia dari injektor induk berlangganan komponen anak, itu tidak akan dimusnahkan saat komponen dihancurkan, ini adalah tanggung jawab komponen untuk berhenti berlangganan dalam komponen ngOnDestroy
(seperti jawaban lain menjelaskan).
class Service implements OnDestroy
? Dan apa yang Anda pikirkan saat ini dipanggil jika layanan disediakan pada tingkat modulimplements OnDestroy
tidak mempengaruhi apa pun tetapi dapat ditambahkan untuk kelengkapan. Ini akan dipanggil ketika modul dihancurkan, sepertiappModule.destroy()
. Ini mungkin berguna untuk beberapa inisialisasi aplikasi.Buat variabel dalam layanan Anda
Dorong setiap langganan Anda ke array sebagai
Tulis
dispose()
metodePanggil metode ini dari komponen Anda selama ngOnDestroy
sumber
@injectables
Saya lebih suka
takeUntil(onDestroy$)
pola ini diaktifkan oleh operator pipable. Saya suka bahwa pola ini lebih ringkas, lebih bersih, dan dengan jelas menyampaikan maksud untuk menghentikan langganan setelah eksekusiOnDestroy
pengait siklus proses.Pola ini berfungsi untuk layanan serta komponen yang berlangganan observable yang diinjeksi. Kode kerangka di bawah ini akan memberi Anda cukup detail untuk mengintegrasikan pola ke dalam layanan Anda sendiri. Bayangkan Anda sedang mengimpor layanan bernama
InjectedService
...Topik kapan / bagaimana berhenti berlangganan dibahas secara luas di sini: Angular / RxJs Kapan saya harus berhenti berlangganan dari `Subscription`
sumber
Hanya untuk memperjelas - Anda tidak perlu menghancurkan
Observables
tetapi hanya langganan yang dibuat untuk mereka.Sepertinya orang lain telah menunjukkan bahwa Anda sekarang dapat menggunakan
ngOnDestroy
layanan juga. Tautan: https://angular.io/api/core/OnDestroysumber
Hati-hati jika menggunakan token
Dalam mencoba membuat aplikasi saya sesederhana mungkin, saya akan sering menggunakan token penyedia untuk menyediakan layanan ke sebuah komponen. Tampaknya ini TIDAK mendapatkan mereka
ngOnDestroy
metode disebut :-(misalnya.
Dengan bagian penyedia dalam sebuah komponen:
Saya
ShopPaymentPanelService
TIDAK memilikinyangOnDestroy
metode yang dipanggil saat komponen dibuang. Saya baru saja menemukan ini dengan cara yang sulit!Solusinya adalah menyediakan layanan terkait dengan
useExisting
.Ketika saya melakukan ini,
ngOnDispose
dipanggil seperti yang diharapkan.Tidak yakin apakah ini bug atau bukan tapi sangat tidak terduga.
sumber