ViewChild 返回未定义

Question

我正在使用材料设计和 Angular 5。我试图使用材料加载器，所以当导航开始显示加载器时，当结束时根据this question 中的答案删除加载器。我试过viewchild by

<mat-progress-bar #spinnerElement [mode]="'indeterminate'" [color]="'primary'"></mat-progress-bar>

并在我的组件构造函数中调用如下：

@ViewChild('spinnerElement')
spinnerElement: ElementRef;

constructor(
.....
    private ngZone: NgZone,
    private renderer: Renderer) {
        console.log(this.spinnerElement, 'spinnerElement');
    }

但是控制台总是返回undefined。对 Angular 有点陌生。知道为什么吗？

Answer 1

看看有角度的life cycle。

您无法在构造函数中访问 DOM 元素，因为它们仍未呈现。

尝试在 ngOnInit() 中访问“spinnerElement”。

ngOnInit():

在 Angular 首次显示后初始化指令/组件 数据绑定属性并设置指令/组件的输入 特性。在第一个 ngOnChanges() 之后调用一次。

Answer 2

在ngOnInit()中访问@ViewChild，在初始化之前不能使用。