Angular ngAfterViewInit 方法

我們將介紹 ngAfterViewInit() 方法並在 Angular 應用程式中使用它。

Angular 中的 ngAfterViewInit() 方法

Angular 中的 ngAfterViewInit() 是 AfterViewInit 的一個方法，Angular 完全初始化了一個在元件檢視之後呼叫的生命週期鉤子。

我們可以使用 ngAfterViewInit() 來處理和執行元件中所需的任何初始化任務，或者我們想要在元件的檢視完全初始化後執行。

我們可以通過兩個裝飾器@ViewChild() 和@ViewChildren() 訪問使用 ngAfterViewInit() 註釋的屬性。

我們將通過一個示例來了解 ngAfterViewInit() 的工作原理以及我們如何在 Angular 應用程式中使用它。

讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

在我們的 app.component.ts 中，我們將建立一個方法 ngAfterViewInit() 到 console.log 我們的訊息。所以我們的程式碼如下所示。

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  ngAfterViewInit() {
    console.log("Sent from Ng After View Init");
  }
}

輸出：

這樣，在元件的檢視被 Angular 初始化後，我們可以使用 ngAfterViewInit() 來初始化任何重要的事情。