Angular 学習がライフサイクルについて語る

この記事は、Angular を学び続けるのに役立ちます。開発に Angular を使用する場合、必然的にライフ サイクルに触れる必要があります。Angular のライフ サイクルについて話しましょう。お役に立てば幸いです。

react と vue の開発に携わったことのある読者は、ライフサイクルの概念に精通しているはずです。 angular を使用した開発プロセスではこれを避けることはできません。

コンポーネントは、作成から破棄までの一連の段階を経ます。これはライフサイクルであり、これらの段階はアプリケーションによって提供される ライフサイクル フックに対応します。

それでは、angular の フック とは何でしょうか?これらを理解することは、プログラムをどこに記述するかについて重要です。 [関連チュートリアルの推奨事項: "angular Tutorial"]

angular、ライフサイクルの実行順序は次のとおりです:

- constructor 【常用，不算钩子函数，但是很重要】
- ngOnChanges【常用】
- ngOnInit【常用】
- ngDoCheck
  - ngAfterContentInit
  - ngAfterContentChecked
  - ngAfterViewInit【常用】
  - ngAfterViewChecked
- ngOnDestroy【常用】

説明と検証: angular-cli を使用して demo プロジェクトを生成します。

constructor

es6 の class がオブジェクトを初期化すると、constructor はすぐに次のようになります。と呼ばれた。

class Person {
  constructor(name) {
    console.log('be called')
    this.name = name;
  }
}

let jimmy = new Person('jimmy'); // be called

angular コンポーネント自体がクラスをエクスポートします。このコンポーネントが new の場合、constructor でデフォルト値が取得されます。

ngOnChanges

外部パラメータを変更すると、ngOnChanges が実行されます。これは、コンポーネントの入力#に @ があることを意味します。 ## は、バインドされたプロパティ値が変更されると呼び出されます。

簡単に言えば、親コンポーネントが子コンポーネントの要素をバインドすると、このフック関数がトリガーされ、複数回開始できます。これについては、以下の

ngOnInit で紹介します。

ngOnInit

このメソッドが呼び出されると、コンポーネントが正常に初期化されたことを意味します。最初の

ngOnChanges() が完了した後に、1 回だけ呼び出されます。

// app.component.ts
export class AppComponent implements OnInit, OnChanges {

  constructor() {
    console.log('1. constructor')
  }

  ngOnChanges() {
    console.log('2. ngOnChanges')
  }

  ngOnInit() {
    console.log('3. ngOnInit')
  }
}

出力される情報は次のとおりです。

え？

ngOnChanges のフック関数情報が出力されないのはなぜですか?

上で述べたように、条件

@Input の属性値が変更されたときにトリガーする必要があります。これを変更してみましょう:

<!-- app.component.html -->
<div>
  <app-demo></app-demo>
</div>

// app.component.ts
// AppComponent 类中添加属性
public count:number = 0;

<!-- demo.component.html -->
<h3>count: {{ count }}</h3>

// demo.component.ts
export class DemoComponent implements OnInit, OnChanges {

  @Input()
  public count: number;

  constructor() {
    console.log('1. demo constructor')
  }

  ngOnChanges() {
    console.log('2. demo ngOnChanges')
  }

  ngOnInit() {
    console.log('3. demo ngOnInit')
  }

}

値が

@Input を通じてサブコンポーネント demo に渡されると、トリガーされます。コンポーネント内の demo ngOnChanges。

@Input によって渡されるプロパティが変更されると、demo コンポーネントの ngOnChanges フック関数が複数回トリガーされる可能性があります。

<!-- app.component.html -->
<div>
  <app-demo [count]="count"></app-demo>

  <button (click)="parentDemo()">parent button</button>
</div>

// app.component.ts
parentDemo() {
  this.count++;
}

ngDoCheck

このフック関数は、変更検出が発生したときにトリガーされます。

このフック関数は、変更検出が実行されるたびに

ngOnChanges の直後に呼び出され、変更検出が初めて実行されるときに ngOnInit の直後に呼び出されます。

// demo.component.ts

ngDoCheck() {
  console.log('4. demo ngDoCheck')
}

このフック関数はより頻繁に呼び出され、使用コストが高くなるため、注意して使用してください。

通常、ngDoCheck ではなく ngOnChanges を使用して変更を検出します。

ngAfterContentInit

外部コンテンツを内部コンポーネントに投影する場合、

ngAfterContentInit は、ngDoCheck への最初の呼び出し後に 1 回だけ呼び出されます。

// demo.component.ts

ngAfterContentInit() {
  console.log('5. demo ngAfterContentInit');
}

ngAfterContentChecked

ngAfterContentChecked フック関数は、各 ngDoCheck の後に呼び出されます。 .

// demo.component.ts

ngAfterContentChecked() {
  console.log('5. demo ngAfterContentChecked');
}

ngAfterViewInit

ビューの初期化が完了した後にこのフック関数を呼び出します。最初の

ngAfterContentChecked の後に 1 回だけ呼び出されます。

現時点では、ページ

// demo.compoent.ts

ngAfterViewInit() {
  console.log('7. demo ngAfterViewInit');
}

の

DOMノードを取得する方が合理的です。

ngAfterViewChecked

视图检测完成调用。在 ngAfterViewinit 后调用，和在每次 ngAfterContentChecked 之后调用，也就是在每次 ngDoCheck 之后调用。

// demo.component.ts

ngAfterViewChecked() {
  console.log('8. ngAfterViewChecked')
}

ngOnDestroy

组件被销毁时候进行的操作。

在这个钩子函数中，我们可以取消订阅，取消定时操作等等。

<!-- app.component.html -->
<app-demo [count]="count" *ngIf="showDemoComponent"></app-demo>

<button (click)="hideDemo()">hide demo component</button>

// app.component.ts
public showDemoComponent: boolean = true;

hideDemo() {
  this.showDemoComponent = false
}

// demo.component.ts
ngOnDestroy() {
  console.log('9. demo ngOnDestroy')
}

PS: 不知道读者有没有发现，调用一次的钩子函数都比较常用～

更多编程相关知识，请访问：编程入门！！

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