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