Angular コンポーネントのライフサイクルの初心者ガイド

ライフサイクルのフックに入る前に、いくつかの核となるトピックについて基礎を理解することが重要です。 Angular ドキュメントによると:

前提条件

ライフサイクルフックを使用する前に、次の基本を理解しておく必要があります。

• TypeScript プログラミング
• Angular の概念で説明されている Angular アプリ設計の基礎

これらの前提条件に慣れたら、Angular が提供する強力なライフサイクル フックを探索する準備が整います。

Angular コンポーネントのライフサイクルは、Angular コンポーネントがどのように作成、更新、破棄されるかの中核です。これらのライフサイクルを理解することで、開発者はコンポーネントの寿命全体にわたる動作を制御し、機能とユーザー エクスペリエンスの両方を向上させることができます。この記事では、Angular コンポーネントのライフサイクル フックを詳しく説明し、例を示し、その典型的な使用例を説明します。

Angular のライフサイクル フックとは何ですか?

Angular は、開発者がコンポーネントのライフサイクルのさまざまな段階で特定のコードを実行するために活用できるライフサイクル フックをいくつか提供します。コンポーネントの初期化から破棄まで、これらのフックはコンポーネントの状態、動作、リソースのクリーンアップの管理に役立ちます。

Angular のすべてのライフサイクル フックのリストは次のとおりです:

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterContentInit
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngOnDestroy

各フックには特定の目的があり、コンポーネントのライフサイクル中の特定の時点で呼び出されます。それぞれについて詳しく見ていきましょう。

---

1.ngOnChanges

目的: 入力プロパティが変更されたときに呼び出されます。

これは、コンポーネントの構築後に呼び出される最初のライフサイクル フックです。 ngOnChanges メソッドは、入力プロパティの値が変更されるたびにトリガーされます。これは、コンポーネントにバインドされた入力プロパティの変更に応じてコードを実行する場合に特に便利です。

例:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

---

2.ngOnInit

目的: コンポーネントの最初の ngOnChanges 後に 1 回呼び出されます。

ngOnInit フックは、初期化コードのほとんどが置かれる場所です。ここは、プロパティの初期化、必要なサブスクリプションの設定、またはコンポーネントが依存する HTTP 呼び出しを行うのに最適な場所です。

例:

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

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

---

3.ngDoCheck

目的: すべての変更検出の実行中に呼び出されます。

ngDoCheck フックを使用すると、独自の変更検出アルゴリズムを実装できます。これは、Angular がネイティブに検出しないオブジェクトの深い変更を追跡するのに役立ちます。ただし、適切に使用しないとパフォーマンスに影響を与える可能性があるため、慎重に使用してください。

例:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

---

4.ngAfterContentInit

目的: 最初の ngDoCheck の後に 1 回呼び出されます。

このフックは、Angular が外部コンテンツをコンポーネントに投影した後に呼び出されます。これは、テンプレートに外部コンテンツを含めるために使用するコンポーネントで特に役立ちます。

例:

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

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

---

5.ngAfterContentChecked

目的: 投影されたコンテンツをチェックするたびに呼び出されます。

ngAfterContentChecked ライフサイクル フックは、Angular がコンポーネントに投影されたコンテンツをチェックするたびに実行されます。これは ngAfterContentInit に似ていますが、各変更検出サイクルの後に実行されます。

例:

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

@Component({
  selector: 'app-sample',
  template: `<p>{{ count }}</p>`
})
export class SampleComponent implements DoCheck {
  count: number = 0;

  ngDoCheck(): void {
    console.log('Change detection running');
    this.count++;
  }
}

---

6.ngAfterViewInit

目的: 最初の ngAfterContentChecked の後に 1 回呼び出されます。

このライフサイクル フックは、コンポーネントのビュー (およびすべての子ビュー) が初期化された後にアクションを実行するために使用されます。これは一般に、Angular がビューの子のプロパティをレンダリングした後にそのプロパティを操作または読み取るために使用されます。

例:

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

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentInit {
  ngAfterContentInit(): void {
    console.log('Content projected');
  }
}

---

7. ngAfterViewChecked

目的: コンポーネントのビューをチェックするたびに呼び出されます。

このフックは、Angular がコンポーネントのビューの更新をチェックした後に呼び出されます。これは ngAfterViewInit に似ていますが、変更検出サイクルごとに実行されます。これは、ビュー内の更新に依存するロジックを適用するために使用できます。

例:

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

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentChecked {
  ngAfterContentChecked(): void {
    console.log('Projected content checked');
  }
}

---

8. ngオンデストロイ

目的: Angular がコンポーネントを破棄する直前に呼び出されます。

ngOnDestroy フックは、オブザーバブルからのサブスクライブ解除、イベント ハンドラーの切り離し、メモリ リークを引き起こす可能性のあるリソースの解放などのクリーンアップ タスクを実行する場所です。

例:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>Hello, world!</p>`
})
export class SampleComponent implements AfterViewInit {
  @ViewChild('textElement') textElement: ElementRef;

  ngAfterViewInit(): void {
    console.log('View initialized:', this.textElement.nativeElement.textContent);
  }
}

結論

これらのライフサイクル フックを理解して効果的に使用すると、Angular アプリケーションをきめ細かく制御できるようになります。 ngOnInit でのデータの初期化から ngOnDestroy でのリソースのクリーンアップまで、ライフサイクル フックは動的アプリケーションに必要な重要な制御を提供します。

次の記事では、これらのフックが実際の Angular アプリケーションでどのように連携して機能するかをさらに詳しく説明し、より複雑なライフサイクルと相互作用の例を示します。

以上がAngular コンポーネントのライフサイクルの初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。