Angular ngAfterViewInit 方法
Rana Hasnain Khan
2022年4月20日
我們將介紹 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()
來初始化任何重要的事情。
Author: Rana Hasnain Khan
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