Angular Academy · Ders

ngOnDestroy ve Temizleme

Bir bileşen kaldırıldığında kaynakları serbest bırakın.

ngOnDestroy ve Temizleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Temizleme Neden Önemlidir

Bir bileşen DOM'dan kaldırıldığında geride kalan abonelikler, zamanlayıcılar veya olay dinleyicileri bellek sızıntılarına neden olabilir. Bunları temizlemeniz gereken yer OnDestroy kancasıdır.

OnDestroy Uygulama

OnDestroy arayüzünü uygulayın ve bir ngOnDestroy yöntemi ekleyin. Angular bunu bileşen yok edilmeden hemen önce çağırır.

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

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

Gözlemlenebilirlerin Aboneliğinden Çıkma

Sızıntıları önlemek için manuel aboneliklerden çıkılmalıdır. Subscription nesnesini saklayın ve ngOnDestroy içinde unsubscribe çağırın.

private sub!: Subscription;

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

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

Birden Çok Aboneliği Yönetme

Abonelikleri tek bir üst Subscription içinde toplayabilir ve hepsinin aboneliğinden aynı anda çıkabilirsiniz.

private subs = new Subscription();

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

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

takeUntil Kalıbı

Yaygın bir RxJS kalıbında, bileşen yok olduğunda akışların otomatik olarak tamamlanması için takeUntil ile bir yok etme Subject'i kullanılır.

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

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

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

takeUntilDestroyed Kullanma

Modern Angular, bir akışı manuel temizleme gerektirmeden bileşenin yaşam döngüsüne bağlayan @angular/core/rxjs-interop içindeki takeUntilDestroyed işlevini sunar.

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

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

async Pipe Alternatifi

Şablonda async pipe'ını kullanmak, yok etme sırasında abonelikten otomatik olarak çıktığı için manuel abonelik ihtiyacını tamamen ortadan kaldırır.

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

Zamanlayıcıları ve Aralıkları Temizleme

Yerel zamanlayıcılar Angular tarafından yönetilmez. Yok etme sonrasında geri çağrıların çalışmasını durdurmak için bunları ngOnDestroy içinde temizleyin.

private id!: number;

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

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

Olay Dinleyicilerini Kaldırma

DOM dinleyicilerini manuel olarak eklerseniz sızıntıları ve eski işleyicileri önlemek için yok etme sırasında kaldırın.

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

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

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

Geri Çağrılar İçin DestroyRef

DestroyRef ekleyebilir ve bir onDestroy geri çağrısı kaydedebilirsiniz; bu, hizmetlerde veya bileşen olmayan bağlamlarda kullanışlıdır.

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

ngOnDestroy Ne Zaman Tetiklenir

ngOnDestroy, bir bileşen yönlendirme, *ngIf gibi yapısal bir yönerge tarafından kaldırıldığında veya üst bileşeni yok edildiğinde çalışır.

Kısa Kontrol

OnDestroy konusunu anlayıp anlamadığınızı test edin.

Özet

OnDestroy kancası abonelikleri, zamanlayıcıları ve dinleyicileri temizler. Bellek sızıntılarını önlemek için unsubscribe, takeUntil kalıbını, takeUntilDestroyed öğesini, async kanalını veya DestroyRef kullanın.

Sıkça Sorulan Sorular

“ngOnDestroy ve Temizleme” dersi ücretsiz mi?

Evet — “ngOnDestroy ve Temizleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“ngOnDestroy ve Temizleme” dersinde ne öğreneceğim?

Bir bileşen kaldırıldığında kaynakları serbest bırakın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“ngOnDestroy ve Temizleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön