Angular ngAfterViewInit 方法

Rana Hasnain Khan 2022年4月20日
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 示例

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

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn