Angular 生命周期鉤子是允許開(kāi)發(fā)人員利用 Angular 組件生命周期的關(guān)鍵時(shí)刻的方法，從創(chuàng)建到銷毀，包括初始化、更改和銷毀。最常用的生命周期鉤子是：

1. 構(gòu)造函數(shù)：頁(yè)面第一次加載時(shí)調(diào)用。只打過(guò)一次電話。
2. ngOnChanges：執(zhí)行多次。第一次將在組件創(chuàng)建/加載時(shí)執(zhí)行。當(dāng) @input 裝飾器的自定義屬性發(fā)生更改時(shí)，每次都會(huì)調(diào)用此鉤子。與爭(zhēng)論一起工作 - 簡(jiǎn)單的改變
3. ngOnInit：組件初始化后調(diào)用。非常適合設(shè)置組件的狀態(tài)。
4. ngDoCheck：用于手動(dòng)檢測(cè)更改（在每個(gè)更改檢測(cè)周期調(diào)用）。
5. ngAfterContentInit：內(nèi)容投影到組件后調(diào)用。
6. ngAfterContentChecked：檢查投影內(nèi)容后調(diào)用。
7. ngAfterViewInit：在視圖初始化后調(diào)用。
8. ngAfterViewChecked：在 Angular 檢查組件視圖后調(diào)用。
9. ngOnDestroy：在組件被銷毀之前調(diào)用。用它來(lái)清理資源，比如取消訂閱 observables。

在深入之前，讓我們創(chuàng)建先決項(xiàng)目：
我們將需要父組件和子組件。我們將在父組件中有輸入字段，并將輸入的值傳遞給子組件，并將顯示在子組件中。

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>Lifecycle Hooks</h1>

<input type="text" placeholder="Input here..." #val>
<button (click)="SubmitValue(val)">Submit Value</button>

<br><br>
<app-child [inputValue]="value"></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.構(gòu)造函數(shù)

• 構(gòu)造函數(shù)是用于初始化組件的 TypeScript 類方法。它在任何 Angular 生命周期鉤子之前調(diào)用。
• 主要用途：初始化依賴注入并設(shè)置變量。

export class ChildComponent implements OnInit {

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

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

  ngOnInit(): void {}

}

2.ngOnChanges

• 當(dāng)組件的任何輸入屬性更改時(shí)調(diào)用。
• 提供一個(gè) SimpleChanges 對(duì)象，其中包含輸入屬性的先前值和當(dāng)前值。
• 用法：更新父組件的數(shù)據(jù)輸入屬性來(lái)觸發(fā)此鉤子。

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;
  }

}

我再次輸入了值，并再次調(diào)用了 ngOnChanges，但構(gòu)造函數(shù)只調(diào)用了一次。

讓我們看看更改參數(shù)中有什么：

<h1>Lifecycle Hooks</h1>

<input type="text" placeholder="Input here..." #val>
<button (click)="SubmitValue(val)">Submit Value</button>

<br><br>
<app-child [inputValue]="value"></app-child>

讓我們輸入一些值來(lái)看看：

3.ngOnInit

• 在第一個(gè) ngOnChanges 之后調(diào)用一次。
• 主要用途：初始化組件并設(shè)置渲染所需的任何數(shù)據(jù)。

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 檢測(cè)到組件或其子組件發(fā)生更改時(shí)運(yùn)行。
• 將其用于自定義更改檢測(cè)邏輯。

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

5.ngAfterContentInit

• 內(nèi)容（例如，）投影到組件后調(diào)用一次。

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

• 每次檢查投影內(nèi)容后調(diào)用。
• 謹(jǐn)慎使用以避免性能問(wèn)題。

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");
  }

}

讓我們來(lái)玩一下這個(gè)：

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");
  }

}

當(dāng) ng-content 再次發(fā)生變化時(shí)，ngAfterContentChecked 被調(diào)用。

7.ngAfterViewInit

• 組件視圖及其子視圖初始化后調(diào)用一次。
• 對(duì)于初始化第三方庫(kù)或 DOM 操作很有用。

8.ngAfterViewChecked

• 每次檢查組件視圖及其子視圖后調(diào)用。

9.ngOnDestroy

• 在組件被銷毀之前調(diào)用。
• 將其用于清理任務(wù)，例如取消訂閱 Observables 或分離事件偵聽(tīng)器。

ngOnDestroy 僅在我們銷毀任何組件時(shí)才會(huì)調(diào)用，因此讓我們嘗試在單擊“銷毀組件”按鈕時(shí)刪除子組件。
讓我們安排一下：

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>Lifecycle Hooks</h1>

<input type="text" placeholder="Input here..." #val>
<button (click)="SubmitValue(val)">Submit Value</button>

<br><br>
<app-child [inputValue]="value"></app-child>

在我們單擊“銷毀組件”按鈕之前：

單擊“銷毀組件”按鈕后：

生命周期掛鉤序列：

1. 構(gòu)造函數(shù)
2. ngOnChanges（如果 @Input 屬性存在）
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

通過(guò)有效地理解和使用這些鉤子，您可以管理組件在其生命周期的不同階段的行為。

以上是Angular 中的組件生命周期的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！