迹忆客 专注技术分享

我们将介绍 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() 来初始化任何重要的事情。