ngOnDestroy และการเก็บกวาด

เหตุผลที่การล้างทรัพยากรสำคัญ

การใช้งาน OnDestroy

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

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

การยกเลิกการสมัครรับข้อมูลจาก Observables

private sub!: Subscription;

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

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

การจัดการการสมัครรับข้อมูลหลายรายการ

private subs = new Subscription();

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

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

รูปแบบ takeUntil

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

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

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

ทางเลือกด้วยไปป์ async

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

การล้างตัวจับเวลาและช่วงเวลา

private id!: number;

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

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

การนำเครื่องรับเหตุการณ์ออก

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

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

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

DestroyRef สำหรับการเรียกย้อนกลับ

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

อะไรเป็นตัวเรียกใช้ ngOnDestroy

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน