angular - ViewChild 返回未定义

Question

我正在使用材料设计和 Angular 5。我试图使用材料加载器，所以当导航开始显示加载器时，当结束时根据这个问题的答案删除加载器。我试过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

看看角度生命周期。

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

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

ngOnInit():

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

Answer 2

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