ngAfterViewInit( ) to early /// ngFor和异步网络请求导致无法选中目标元素的问题

**ngAfterViewInit() 到底是什么？**

在 Angular 中，`ngAfterViewInit()` 是一个生命周期钩子函数，它在组件的视图已经初始化完成后被调用。这个函数通常用于执行一些需要等待视图渲染完成的操作，例如获取 DOM 元素、设置事件监听器等。

然而，在某些情况下，我们可能会遇到 `ngAfterViewInit()` 被触发太早的问题。这可能导致一些问题，例如无法选中目标元素、DOM 元素不存在等。今天我们就来探讨一下这个问题的原因和解决方案。

**ngFor 和异步网络请求**

当我们使用 `ngFor` 指令循环渲染数据时，Angular 会自动为每个项创建一个 DOM 元素。但是，如果这些数据是通过异步网络请求获取的，那么 `ngAfterViewInit()` 就可能被触发太早。

例如，我们有一个组件，需要从服务器获取用户列表，然后使用 `ngFor` 渲染这些用户：

typescriptimport { Component } from '@angular/core';
import { HttpClient } from '@angular/common/ />
@Component({
 selector: 'app-user-list',
 template: `
 

 
{{ user.name }}
 
 `,
})
export class UserListComponent {
 users = [];

 constructor(private  HttpClient) {}

 ngOnInit(): void {
 this. => {
 this.users = data;
 });
 }
}

在这个例子中，`ngAfterViewInit()` 将被触发太早，因为 `users` 数组还没有从服务器获取完成。

**解决方案**

要解决这个问题，我们可以使用 Angular 的 `OnChanges` 生命周期钩子函数，它允许我们监听组件的输入属性变化。我们可以在 `OnChanges` 中检查数据是否已经准备好，然后再触发 `ngAfterViewInit()`。

typescriptimport { Component, OnChanges, SimpleChanges } from '@angular/core';
import { HttpClient } from '@angular/common/ />
@Component({
 selector: 'app-user-list',
 template: `
 

 
{{ user.name }}
 
 `,
})
export class UserListComponent implements OnChanges {
 @Input() users = [];

 constructor(private  HttpClient) {}

 ngOnChanges(changes: SimpleChanges): void {
 if (changes.users && changes.users.currentValue.length >0) {
 this.ngAfterViewInit();
 }
 }

 ngAfterViewInit(): void {
 console.log('ngAfterViewInit() triggered');
 }
}

在这个例子中，我们实现了 `OnChanges` 生命周期钩子函数，并检查 `users` 数组是否已经准备好。如果是，则触发 `ngAfterViewInit()`。

**总结**

`ngAfterViewInit()` 到底是什么？它是一个生命周期钩子函数，用于执行需要等待视图渲染完成的操作。在某些情况下，我们可能会遇到 `ngAfterViewInit()` 被触发太早的问题，这可能导致无法选中目标元素、DOM 元素不存在等问题。通过使用 Angular 的 `OnChanges` 生命周期钩子函数，我们可以解决这个问题，并确保 `ngAfterViewInit()` 在数据准备好时被触发。

**参考**

* [Angular Official Documentation: Lifecycle Hooks]( />* [Stack Overflow: ngAfterViewInit() triggered too early](