ngOnDestroyとクリーンアップ
コンポーネントの削除時にリソースを解放します。
「ngOnDestroyとクリーンアップ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
クリーンアップが重要な理由
コンポーネントが DOM から削除された後も購読、タイマー、イベントリスナーが残っていると、メモリリークの原因になります。OnDestroy フックでそれらをクリーンアップします。
OnDestroy の実装
OnDestroy を実装し、ngOnDestroy メソッドを追加します。Angular はコンポーネントが破棄される直前に呼び出します。
import { Component, OnDestroy } from "@angular/core";
@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnDestroy {
ngOnDestroy(): void {
console.log("cleaning up");
}
}Observable の購読解除
メモリリークを防ぐには、手動で行った購読を解除する必要があります。Subscription を保存し、ngOnDestroy で unsubscribe を呼び出してください。
private sub!: Subscription;
ngOnInit() {
this.sub = this.timer$.subscribe(t => this.tick = t);
}
ngOnDestroy() {
this.sub.unsubscribe();
}複数の購読の管理
複数の購読を1つの親 Subscription にまとめ、すべてを一度に購読解除できます。
private subs = new Subscription();
ngOnInit() {
this.subs.add(this.a$.subscribe());
this.subs.add(this.b$.subscribe());
}
ngOnDestroy() {
this.subs.unsubscribe();
}takeUntil パターン
よく使われる RxJS パターンでは、破棄用の Subject と 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 の使用
最新の Angular では、@angular/core/rxjs-interop の takeUntilDestroyed を利用できます。手動でクリーンアップしなくても、ストリームをコンポーネントのライフサイクルに関連付けられます。
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
constructor() {
this.data$.pipe(takeUntilDestroyed())
.subscribe(d => this.data = d);
}async パイプという選択肢
テンプレートで async パイプを使えば、破棄時に自動で購読解除されるため、手動での購読を完全に避けられます。
<p>{{ data$ | async }}</p>タイマーとインターバルの解除
ネイティブのタイマーは Angular によって管理されません。破棄後にコールバックが実行され続けないよう、ngOnDestroy で解除してください。
private id!: number;
ngOnInit() {
this.id = window.setInterval(() => this.tick(), 1000);
}
ngOnDestroy() {
clearInterval(this.id);
}イベントリスナーの削除
DOM リスナーを手動で追加した場合は、メモリリークや古いハンドラーを防ぐため、破棄時に削除してください。
private onScroll = () => this.handle();
ngOnInit() {
window.addEventListener("scroll", this.onScroll);
}
ngOnDestroy() {
window.removeEventListener("scroll", this.onScroll);
}コールバック用の DestroyRef
DestroyRef を注入して onDestroy コールバックを登録できます。サービスやコンポーネント以外のコンテキストで役立ちます。
constructor(private destroyRef: DestroyRef) {
const id = setInterval(() => {}, 1000);
this.destroyRef.onDestroy(() => clearInterval(id));
}ngOnDestroyが実行されるタイミング
ngOnDestroyは、ルーティングや*ngIfのような構造ディレクティブによってコンポーネントが削除されたとき、または親が破棄されたときに実行されます。
理解度チェック
OnDestroyについての理解度を確認しましょう。
まとめ
OnDestroyフックでは、サブスクリプション、タイマー、リスナーをクリーンアップします。メモリリークを防ぐには、unsubscribe、takeUntilパターン、takeUntilDestroyed、asyncパイプ、またはDestroyRefを使用します。
よくある質問
「ngOnDestroyとクリーンアップ」レッスンは無料ですか？
はい。「ngOnDestroyとクリーンアップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「ngOnDestroyとクリーンアップ」で何を学びますか？
コンポーネントの削除時にリソースを解放します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ngOnDestroyとクリーンアップ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ngOnInitと初期化
- ngOnChangesと入力変更
- ngOnDestroyとクリーンアップ
- AfterViewとAfterContentフック