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

1. 建構(gòu)子：頁面第一次載入時呼叫。只打過一次電話。
2. ngOnChanges：執(zhí)行多次。第一次將在元件建立/載入時執(zhí)行。當(dāng) @input 裝飾器的自訂屬性發(fā)生變更時，每次都會呼叫此鉤子。與爭論一起工作 - 簡單的改變
3. ngOnInit：組件初始化後呼叫。非常適合設(shè)定組件的狀態(tài)。
4. ngDoCheck：用於手動偵測變更（在每個變更偵測週期呼叫）。
5. ngAfterContentInit：內(nèi)容投影到元件後呼叫。
6. ngAfterContentChecked：檢查投影內(nèi)容後呼叫。
7. ngAfterViewInit：在視圖初始化後呼叫。
8. ngAfterViewChecked：在 Angular 檢查元件視圖後呼叫。
9. ngOnDestroy：在元件被銷毀之前呼叫。用它來清理資源，例如取消訂閱 observables。

在深入之前，讓我們先建立先決項目：
我們將需要父元件和子元件。我們將在父組件中有輸入字段，並將輸入的值傳遞給子組件，並將顯示在子組件中。

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)子

• 建構(gòu)子是用來初始化元件的 TypeScript 類別方法。它在任何 Angular 生命週期鉤子之前調(diào)用。
• 主要用途：初始化依賴注入並設(shè)定變數(shù)。

export class ChildComponent implements OnInit {

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

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

  ngOnInit(): void {}

}

2.ngOnChanges

• 當(dāng)元件的任何輸入屬性變更時呼叫。
• 提供一個 SimpleChanges 對象，其中包含輸入屬性的先前值和目前值。
• 用法：更新父元件的資料輸入屬性來觸發(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;
  }

}

我再次輸入了值，並再次呼叫了 ngOnChanges，但建構(gòu)子只呼叫了一次。

讓我們看看更改參數(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>

讓我們輸入一些數(shù)值來看：

3.ngOnInit

• 在第一個 ngOnChanges 之後呼叫一次。
• 主要用途：初始化元件並設(shè)定渲染所需的任何資料。

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 偵測到元件或其子元件發(fā)生變更時執(zhí)行。
• 將其用於自訂變更偵測邏輯。

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

5.ngAfterContentInit

• 內(nèi)容（例如，）投影到元件後呼叫一次。

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)容後呼叫。
• 謹(jǐ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");
  }

}

讓我們來玩一下這個：

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 再次改變時，ngAfterContentChecked 被呼叫。

7.ngAfterViewInit

• 元件視圖及其子視圖初始化後呼叫一次。
• 對於初始化第三方函式庫或 DOM 操作很有用。

8.ngAfterViewChecked

• 每次檢查元件視圖及其子視圖後呼叫。

9.ngOnDestroy

• 在元件被銷毀之前呼叫。
• 將其用於清理任務(wù)，例如取消訂閱 Observables 或分離事件偵聽器。

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

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)子
2. ngOnChanges（如果 @Input 屬性存在）
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

透過有效地理解和使用這些鉤子，您可以管理元件在其生命週期的不同階段的行為。

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