为什么在ngOnInit（）中异步函数导致ViewChild未定义

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在undefined是console.log('h1:' + this.h1);？

Answer 1

因为，由于传递给ngIf的条件尚未通过此时的更改检测进行重新评估，因此该元素尚未在视图中。

您需要了解在代码的每条指令之后都不会执行更改检测和dom更新。即使这是可能的，也会使表现变得可怕。

循环基本上是

1. 检测事件（如超时，异步http响应或某些dom事件，如点击）
2. 执行处理此事件的代码
3. 检测组件状态的变化，以及模板中使用的表达式（如showh1）
4. 更新DOM
5. 去1