ViewChild返回undefined

Question

我正在使用材质设计和Angular 5.我正在尝试使用材质加载器，因此当导航开始显示加载器和何时根据this question中的答案移除加载器。我尝试了viewchild

<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

在@ViewChild中访问ngOnInit()，在初始化之前无法使用它。