3

这是 Component ,它#h1在 html 中引用了一个 ViewChild:

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_undefinedconsole.log('h1:' + this.h1);

2020 年 11 月更新如果您使用的是具有静态选项的 最新 Angularv9,您就不会遇到这种情况@ViewChild

4

1 回答 1

2

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

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

循环基本上是

  1. 检测事件(如超时,或异步 http 响应,或某些 dom 事件,如点击)
  2. 执行处理此事件的代码
  3. 检测组件状态的变化,以及模板中使用的表达式(如showh1
  4. 更新 DOM
  5. 去 1
于 2017-12-17T20:58:16.030 回答