Angular 中的組件生命週期

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

1. 建構子：頁面第一次載入時呼叫。只打過一次電話。
2. ngOnChanges：執行多次。第一次將在元件建立/載入時執行。當 @input 裝飾器的自訂屬性發生變更時，每次都會呼叫此鉤子。與爭論一起工作 - 簡單的改變
3. ngOnInit：組件初始化後呼叫。非常適合設定組件的狀態。
4. ngDoCheck：用於手動偵測變更（在每個變更偵測週期呼叫）。
5. ngAfterContentInit：內容投影到元件後呼叫。
6. ngAfterContentChecked：檢查投影內容後呼叫。
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.建構子

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

export class ChildComponent implements OnInit {

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

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

  ngOnInit(): void {}

}

2.ngOnChanges

• 當元件的任何輸入屬性變更時呼叫。
• 提供一個 SimpleChanges 對象，其中包含輸入屬性的先前值和目前值。
• 用法：更新父元件的資料輸入屬性來觸發此鉤子。

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，但建構子只呼叫了一次。

讓我們看看更改參數中有什麼：

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

讓我們輸入一些數值來看：

3.ngOnInit

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

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

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

5.ngAfterContentInit

• 內容（例如，）投影到元件後呼叫一次。

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

• 每次檢查投影內容後呼叫。
• 謹慎使用以避免效能問題。

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

}

當 ng-content 再次改變時，ngAfterContentChecked 被呼叫。

7.ngAfterViewInit

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

8.ngAfterViewChecked

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

9.ngOnDestroy

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

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

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

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

以上是Angular 中的組件生命週期的詳細內容。更多資訊請關注PHP中文網其他相關文章！