Viewchild 中静态的默认值

在 Angular 中，ViewChild 装饰器用于从组件的视图层次结构中获取一个 DOM 元素或组件实例，以供在组件代码中使用。@ViewChild(propertyName, { static: true }) 将会获取到组件视图中的元素或组件实例。

在 ViewChild 中，静态的默认值为 false。这意味着如果视图元素或组件实例在组件初始化之前发生变化，@ViewChild 不能检测到该变化，容易导致错误。

在 Angular 9 中，检查视图元素或组件实例状态的方式已发生了变化。在 ngAfterViewInit 生命周期钩子内，静态默认值为 false 以防止因渲染时视图元素不存在而引发错误。

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1 #title>{{ pageTitle }}</h1>
    <button (click)="changeTitle()">Change Title</button>
  `
})
export class AppComponent implements AfterViewInit {
  public pageTitle = 'Hello, World!';

  @ViewChild('title', { static: true }) public title: ElementRef<HTMLElement>;

  public ngAfterViewInit() {
    console.log(this.title.nativeElement.innerHTML);
  }

  public changeTitle() {
    this.pageTitle = 'Hello, Angular!';
  }
}

此代码片段中，我们首先定义了一个标题元素，然后将其赋值给 pageTitle 变量。然后，我们在 AppComponent 中使用 @ViewChild 装饰器来获取该元素的引用。最后，在 ngAfterViewInit 生命周期钩子中，我们可以访问标题元素的 nativeElement 属性。当我们在 changeTitle 方法内部更新 pageTitle 变量时，标题元素的文本也会更改，我们可以检测到该更改。

本文介绍了 ViewChild 中静态默认值的使用方法。如果需要检测视图元素或组件实例的状态变化，请在 ngAfterViewInit 生命周期钩子内使用 static: true。意识到这个细节可以让我们写出更加健壮和可靠的组件。