Angularコンポーネントライフサイクルの詳細説明（I）

概要

コンポーネント宣言サイクルとAngularの変更検出メカニズム

赤いメソッドは 1 回だけ実行されます。

変更検出中に実行されるグリーンメソッドは、コンポーネントの初期化中に実行されるグリーンメソッドと同じです。

全部で9つの方法があります。

各フックは、@angular/core ライブラリで定義されたインターフェースです。

'@angular/core' から Component、OnInit をインポートします。

@成分（{
  セレクター: 'app-life',
  テンプレート URL: './life.component.html',
  スタイル URL: ['./life.component.css']
})
LifeComponentクラスをエクスポートし、OnInitを実装します。

  コンストラクタ() { }

  ngOnInit() {
  }

}

インターフェースは必須ではありませんが、Angular はフックメソッドを検出するとそれを実行するので、インターフェースを記述することをお勧めします。

1. フックの呼び出し順序

'@angular/core' から { Component、OnInit、OnChanges、DoCheck、AfterContentInit、AfterContentChecked、AfterViewInit、AfterViewChecked、OnDestroy、Input、SimpleChange、SimpleChanges } をインポートします。

let logIndex: number = 1; //Counter@Component({
  セレクター: 'app-life',
  テンプレート URL: './life.component.html',
  スタイル URL: ['./life.component.css']
})
エクスポートクラス LifeComponent は OnInit、OnChanges、DoCheck、AfterContentInit を実装します。
  、AfterContentChecked、AfterViewInit、AfterViewChecked、OnDestroy {
  @入力（）
  名前: 文字列;

  logIt(メッセージ: 文字列) {
    console.log(`# ${logIndex++} ${msg}`);
  }
  コンストラクタ() {
    this.logIt("コンストラクタの name プロパティの値は: " + this.name);
  }

  ngOnInit() {
    this.logIt("OnInit の name プロパティの値は: " + this.name);
  }

  ngOnChanges(changes: SimpleChanges): void { // SimpleChanges オブジェクトを渡します let name = changes['name'].currentValue;
    this.logIt("ngOnChanges の name 属性の値は: " + this.name);
  }

  ngDoCheck(): void {
    this.logIt("DoCheck");
  }

  ngAfterContentInit() {
    this.logIt("ngAfterContentInit");
  }

  ngAfterContentChecked() {
    this.logIt("ngAfterContentChecked");
  }

  ngAfterViewInit() {
    this.logIt("ngAfterViewInit");
  }

  ngAfterViewChecked() {
    this.logIt("ngAfterViewChecked");
  }
  ngOnDestroy() {
    this.logIt("ngOnDestory");
  }
}

初期化ロジックが入力プロパティの値に依存する場合、初期化ロジックはコンストラクターではなく ngOnInit に記述する必要があります。

DoCheck は、Angular のすべての変更検出サイクル中に呼び出されます。

ngAfterContentInit と ngAfterContentChecked は、テンプレートとコンポーネントコンテンツの投影に関連しています。

ngAfterViewInit と ngAfterViewChecked は、コンポーネントテンプレートと初期化ビューに関連しています。

2. onChangesフック

親コンポーネントは、子コンポーネントの入力パラメータを初期化または変更するときに呼び出されます。

まず、js の可変オブジェクトと不変オブジェクトを理解する必要があります。

//文字列は不変です var greeting = "Hello";
挨拶 = "こんにちは世界";
//オブジェクトは変更可能です var user = { name: "Tom" };
ユーザー名 = "ジェリー";

例：

子コンポーネントには 3 つのプロパティがあり、そのうち 2 つは入力プロパティです。

親コンポーネントには、Tom のユーザーオブジェクトである greeting プロパティと name プロパティがあります。

親コンポーネントは入力プロパティを変更する必要があるため、greeting と user.name は双方向にバインドされます。

<div class="parent">
    <h2>私は親コンポーネントです</h2>
    <div>挨拶: <input type="text" [(ngModel)]="greeting"></div>
    <div>
      名前：
      <input type="text" [(ngModel)]="ユーザー名">
    </div>
    <app-child [greeting]="greeting" [(user)]="user"> </app-child>
</div>

親コンポーネントが 2 つの入力の値を変更すると、子コンポーネントに渡される値も変更されます。子コンポーネントに渡される入力プロパティの値が変化すると、ngOnChanges() がトリガーされます。

親コンポーネントは子コンポーネントを初期化します。初期化中に ngOnChanges() を 1 回呼び出します。初期化後、子コンポーネントの挨拶は、親コンポーネントの挨拶の値である Hello になります。

ユーザーは Tom という名前属性を持つオブジェクトになります。

入力属性の値を変更し、親コンポーネントの greeting を Helloa に変更します。

Angular の変更検出は、不変オブジェクト、つまり greeting の値を更新し、ngOnChanges() メソッドを呼び出します。greeting の値は、以前の hello から Helloa に変更されます。

user.name を Tomb に変更すると、コンソールに新しいメッセージは表示されなくなります。

ユーザーは可変オブジェクトユーザーのプロパティのみを変更したため、ユーザーオブジェクト自体への参照は変更されず、onChanges() メソッドは呼び出されませんでした。

可変オブジェクトのプロパティの変更によって ngOnChanges() メソッドの呼び出しはトリガーされませんが、Angular の変更検出メカニズムによってコンポーネント内の各オブジェクトのプロパティの変更がキャプチャされるため、子コンポーネントのユーザーオブジェクトのプロパティは変更されます。

子コンポーネントの message プロパティを変更しても、子コンポーネントの onChanges() メソッドは呼び出されません。メッセージは入力属性ではないためです。 ngOnChanges() は、入力プロパティが変更された場合にのみ呼び出されます。

3. 変更検出メカニズムとDoCheck()フック

変更検出はzone.jsによって実装されます。コンポーネントプロパティの変更がページの変更と同期されていることを確認します。ブラウザで発生する非同期イベント (ボタンのクリック、データの入力、サーバーからのデータの戻り、setTimeout() メソッドの呼び出し) により、変更検出がトリガーされます。

変更検出が実行されると、コンポーネントテンプレート上のすべてのバインディング関係が検出されます。コンポーネントのプロパティが変更された場合、それにバインドされているテンプレートの対応する領域を更新する必要がある場合があります。

注意: 変更検出メカニズムは、コンポーネントプロパティの変更をテンプレートに反映するだけです。変更検出メカニズム自体は、コンポーネントプロパティの値を変更することはありません。

2 つの変更検出戦略。

デフォルトでは、コンポーネントツリー全体をチェックして変更を検出します。
OnPush は、入力プロパティが変更された場合にのみ、コンポーネントとそのサブコンポーネントを検出します。

Angular アプリケーションは、メインコンポーネントをルートとするコンポーネントツリーです。各コンポーネントは変更検出器を生成します。いずれかの変更検出器が変更を検出すると、zone.js はコンポーネントの変更チェック戦略に基づいてコンポーネントをチェックし (つまり、doCheck() フックを呼び出し)、コンポーネントのテンプレートを更新する必要があるかどうかを判断します。

DoCheck は、変更がどのコンポーネントで発生したかに関係なく、ルートコンポーネントから始まるすべてのコンポーネントツリーをチェックします。

例：

user.name などの変更可能なオブジェクトの属性の変更を監視します。

変更前のユーザー名を保存するために子に oldUsername を追加し、ユーザー名が変更されたかどうかをマークするために changeDetected 属性を追加します。デフォルト値は false です。 noChangeCount カウンターのデフォルトは 0 です。

'@angular/core' から Component、OnInit、Input、OnChanges、SimpleChanges、DoCheck をインポートします。

@成分（{
  セレクタ: 'app-child',
  テンプレート URL: './child.component.html',
  スタイル URL: ['./child.component.css']
})
エクスポートクラス ChildComponent は OnInit、OnChanges、DoCheck を実装します {

  @入力（）
  挨拶: 文字列;

  @入力（）
  ユーザー: { 名前: 文字列 };

  message: string = "初期化メッセージ";
  oldUsername: 文字列;
  変更検出: ブール値 = false;
  変更回数なし: 数値 = 0;

  コンストラクタ() { }

  ngOnInit() {
  }

  ngOnChanges(変更: SimpleChanges): void {
    console.log(JSON.stringify(変更、null、2));
  }

  ngDoCheck() {
    if (this.user.name !== this.oldUsername) {
      this.changeDetected = true;
      console.log("DoCheck: user.name が " + this.oldUsername + " から " + this.user.name に変更されます);
      this.oldUsername = this.user.name;
    }
    if (this.changeDetected){//変更カウンタが0にクリアされました
      this.noChangeCount = 0;
    } else{// 変更なし this.noChangeCount++;
      console.log("DoCheck: user.name が変更されていないときに ngDoCheck メソッドが呼び出されました" + this.noChangeCount + "回")
    }
    this.changeDetected = false; //最後に、変更の有無に関係なくフラグがリセットされます}

}