この記事は、Angular を学び続けるのに役立ちます。開発に Angular を使用する場合、必然的にライフ サイクルに触れる必要があります。Angular のライフ サイクルについて話しましょう。お役に立てば幸いです。
react
と vue
の開発に携わったことのある読者は、ライフサイクルの概念に精通しているはずです。 angular
を使用した開発プロセスではこれを避けることはできません。
コンポーネントは、作成から破棄までの一連の段階を経ます。これはライフサイクルであり、これらの段階はアプリケーションによって提供される ライフサイクル フック
に対応します。
それでは、angular
の フック
とは何でしょうか?これらを理解することは、プログラムをどこに記述するかについて重要です。 [関連チュートリアルの推奨事項: "angular Tutorial"]
angular
、ライフサイクルの実行順序は次のとおりです:
- constructor 【常用,不算钩子函数,但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck - ngAfterContentInit - ngAfterContentChecked - ngAfterViewInit【常用】 - ngAfterViewChecked - ngOnDestroy【常用】
説明と検証: angular-cli
を使用して demo
プロジェクトを生成します。
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
が実行されます。これは、コンポーネントの入力#に @ があることを意味します。 ## は、バインドされたプロパティ値が変更されると呼び出されます。
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++; }
ngOnChanges の直後に呼び出され、変更検出が初めて実行されるときに
ngOnInit の直後に呼び出されます。
// demo.component.ts ngDoCheck() { console.log('4. demo ngDoCheck') }
通常、ngDoCheck ではなく ngOnChanges を使用して変更を検出します。
ngAfterContentInit は、
ngDoCheck への最初の呼び出し後に 1 回だけ呼び出されます。
// demo.component.ts ngAfterContentInit() { console.log('5. demo ngAfterContentInit'); }
ngAfterContentChecked フック関数は、各
ngDoCheck の後に呼び出されます。 .
// demo.component.ts ngAfterContentChecked() { console.log('5. demo ngAfterContentChecked'); }
ngAfterContentChecked の後に 1 回だけ呼び出されます。
// demo.compoent.ts ngAfterViewInit() { console.log('7. demo ngAfterViewInit'); }
のDOMノードを取得する方が合理的です。
视图检测完成调用。在 ngAfterViewinit
后调用,和在每次 ngAfterContentChecked
之后调用,也就是在每次 ngDoCheck
之后调用。
// demo.component.ts ngAfterViewChecked() { console.log('8. ngAfterViewChecked') }
组件被销毁时候进行的操作。
在这个钩子函数中,我们可以取消订阅,取消定时操作等等。
<!-- 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 サイトの他の関連記事を参照してください。