@Viewchild 在 ngOnInit 期间未初始化

typescript

在Angular应用中，@ViewChild装饰器是一个常用的工具，用于在组件中引用子组件或DOM元素。通常，我们会在组件的ngOnInit生命周期钩子中初始化这些引用。然而，有时候你可能会遇到一个问题：在ngOnInit期间，@ViewChild引用尚未被正确初始化。这可能导致一些令人困惑的错误，因为你可能期望在这个时候就能够访问你的子组件或DOM元素，但实际上并非如此。

这个问题的根本原因是Angular的生命周期和变更检测机制。在ngOnInit中，组件的视图和子组件可能尚未完全初始化。这可能是由于变更检测机制的异步性质，导致在ngOnInit中获取的@ViewChild引用可能还没有被Angular框架完全设置好。

为了解决这个问题，我们可以采用一些策略，确保在访问@ViewChild引用时已经完全初始化。

首先，让我们考虑一个简单的例子，演示了@ViewChild在ngOnInit期间未初始化的情况：

typescript
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: <code>
    <div #myDiv>Hello, ViewChild!</div>
  </code>,
})
export class MyComponent implements AfterViewInit {
  @ViewChild('myDiv') myDiv!: ElementRef;
  ngOnInit() {
    // 在这里访问this.myDiv.nativeElement可能导致错误
    console.log(this.myDiv.nativeElement.innerText);
  }
  ngAfterViewInit() {
    // 在这里访问是安全的
    console.log(this.myDiv.nativeElement.innerText);
  }
}

在上面的例子中，我们尝试在ngOnInit中访问this.myDiv.nativeElement.innerText，但这可能会导致错误，因为在这个时候DOM元素可能还没有被Angular框架完全初始化。

## 解决方法：使用ngAfterViewInit

为了确保在安全的时机访问@ViewChild引用，我们可以将逻辑移到ngAfterViewInit生命周期钩子中。这个钩子在Angular视图和子组件都已初始化完成后被调用，因此是一个安全的地方进行操作。修改上面的例子：

typescript
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: <code>
    <div #myDiv>Hello, ViewChild!</div>
  </code>,
})
export class MyComponent implements AfterViewInit {
  @ViewChild('myDiv') myDiv!: ElementRef;
  ngOnInit() {
    // 在ngOnInit中不再访问this.myDiv.nativeElement
  }
  ngAfterViewInit() {
    // 在这里访问是安全的
    console.log(this.myDiv.nativeElement.innerText);
  }
}

通过将逻辑移到ngAfterViewInit中，我们确保了在访问@ViewChild引用时，DOM元素已经完全初始化，从而避免了潜在的错误。这是一个简单而有效的解决方案，确保你的代码在Angular生命周期中正确执行。