Angular のコンポーネントのライフサイクル

Angular ライフサイクル フックは、開発者が Angular コンポーネントの作成から破棄 (初期化、変更、破棄を含む) までのライフ サイクルの重要な瞬間を利用できるようにするメソッドです。最も一般的に使用されるライフサイクル フックは次のとおりです:

1. Constructor: ページが初めて読み込まれるときに呼び出されます。呼び出しは 1 回だけです。
2. ngOnChanges: 複数回実行します。初回は、コンポーネントが作成/ロードされたときに実行されます。このフックが呼び出されるたびに @input デコレータを使用してカスタム プロパティに変更がある場合。引数を使用して動作しました - 単純な変更
3. ngOnInit: コンポーネントが初期化されると呼び出されます。コンポーネントの状態を設定するのに最適です。
4. ngDoCheck: 変更を手動で検出するために使用されます (変更検出サイクルごとに呼び出されます)。
5. ngAfterContentInit: コンテンツがコンポーネントに投影された後に呼び出されます。
6. ngAfterContentChecked: 投影されたコンテンツがチェックされた後に呼び出されます。
7. ngAfterViewInit: ビューが初期化された後に呼び出されます。
8. ngAfterViewChecked: Angular がコンポーネントのビューをチェックした後に呼び出されます。
9. ngOnDestroy: コンポーネントが破棄される直前に呼び出されます。これを使用して、observable からのサブスクライブ解除など、リソースをクリーンアップします。

本題に入る前に、前提条件となるプロジェクトを作成しましょう:
親コンポーネントと子コンポーネントが必要になります。親コンポーネントに入力フィールドがあり、その入力値を子に渡して子コンポーネントに表示します。

parent.component.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.component.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

child.component.html

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

次のような出力が得られます:

1.コンストラクター

• コンストラクターは、コンポーネントを初期化するために使用される TypeScript クラス メソッドです。これは、Angular ライフサイクル フックの前に呼び出されます。
• 主な用途: 依存関係の注入を初期化し、変数を設定します。

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

2.ngOnChanges

• コンポーネントの入力プロパティが変更されたときに呼び出されます。
• 入力プロパティの以前の値と現在の値を含む SimpleChanges オブジェクトを提供します。
• 使用法: 親コンポーネントからデータ入力プロパティを更新して、このフックをトリガーします。

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

再度値を入力し、ngOnChanges を再度呼び出しましたが、コンストラクターは 1 回しか呼び出されませんでした。

変更引数の内容を見てみましょう:

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

値を入力して見てみましょう:

3.ngOnInit

• 最初の ngOnChanges の後に 1 回呼び出されます。
• 主な用途: コンポーネントを初期化し、レンダリングに必要なデータを設定します。

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

4.ngDoCheck

• Angular がコンポーネントまたはその子の変更を検出するたびに実行されます。
• これをカスタム変更検出ロジックに使用します。

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

5.ngAfterContentInit

• コンテンツ (例: ) がコンポーネントに投影された後に 1 回呼び出されます。

child.component.html

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

parent.component.html

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

child.component.ts

 ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

6.ngAfterContentChecked

• 投影されたコンテンツをチェックするたびに呼び出されます。
• パフォーマンスの問題を避けるために、使用は控えめにしてください。

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

}

これについて遊んでみましょう:

export class ChildComponent implements OnInit, OnChanges, DoCheck {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

  ngDoCheck() {
    console.log("ngDoCheck Called");
  }

}

ng-content に再び変更があると、ngAfterContentChecked が呼び出されます。

7.ngAfterViewInit

• コンポーネントのビューとその子ビューが初期化された後に 1 回呼び出されます。
• サードパーティのライブラリまたは DOM 操作の初期化に役立ちます。

8.ngAfterViewChecked

• コンポーネントのビューとその子ビューをチェックするたびに呼び出されます。

9.ngOnDestroy

• コンポーネントが破棄される直前に呼び出されます。
• Observables からのサブスクライブ解除やイベント リスナーの切り離しなどのクリーンアップ タスクに使用します。

ngOnDestroy はコンポーネントを破棄する場合にのみ呼び出されます。そのため、コンポーネントの破棄ボタンをクリックしたときに子コンポーネントを削除してみます。
手配をしましょう:

parent.component.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.component.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

「コンポーネントを破棄」ボタンをクリックする前に:

「コンポーネントを破棄」ボタンをクリックした後:

ライフサイクルフックシーケンス:

1. コンストラクター
2. ngOnChanges (@Input プロパティが存在する場合)
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

これらのフックを理解し、効果的に使用することで、ライフサイクルのさまざまな段階でコンポーネントの動作を管理できます。

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