angular - 为什么异步函数导致 ViewChild 在 ngOnInit() 中未定义

Question

这里是 Component，它有一个 ViewChild，在 html 中引用 #h1:

import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
  <h1 #h1 *ngIf="showh1">
    Welcome to {{title}}!
  </h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public showh1: boolean = false;
  @ViewChild('h1') h1: ElementRef;
  ngOnInit() {
    setTimeout(() => { //http.get in actual scenario
      this.showh1 = true;
      console.log('h1:' + this.h1);   //h1:undefined
      setTimeout(() => {
        console.log('h2:' + this.h1); //h2:[object Object]
      }, 1);
    }, 1000);
  }
}

为什么 this.h1 在 console.log('h1:' + this.h1); 中是 undefined ？

2020 年 11 月更新如果你使用最新的 Angularv9，你就不会遇到这种情况，它有 static @ViewChild 上的选项。

Answer 1

因为传递给 ngIf 的条件在那个时候还没有被变化检测重新评估，元素还不在 View 中。

您需要了解更改检测和 dom 更新并不是在您的代码的每条指令之后完成的。即使这是可能的，也会使性能变得糟糕。

循环基本上是

1. 检测事件(如超时、异步 http 响应或某些 dom 事件，如点击)
2. 执行处理这个事件的代码
3. 检测组件状态和模板中使用的表达式(如 showh1)的变化
4. 更新DOM
5. 转到1