这是 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
_undefined
console.log('h1:' + this.h1);
2020 年 11 月更新如果您使用的是具有静态选项的
最新 Angularv9,您就不会遇到这种情况@ViewChild
。