使用 @ViewChild 时 ElementRef 未定义

Question

import {Component, ElementRef, HostBinding, ViewChild} from '@angular/core';
export class MainPage {
  constructor(
    el: ElementRef
  ) {
    this.contentElement = el.nativeElement;
  }

  contentElement = null;

@ViewChild('wrapper', { static: true }) wrapper: ElementRef;

this.size = this.wrapper.nativeElement.clientWidth - 36;

结果

ERROR TypeError: Cannot read property 'nativeElement' of undefined

console.log(this.wrapper);
=>undefined

在另一个组件中，没有任何初始化也能正常工作。

但是我不知道为什么这个组件不能工作

Answer 1

如果您不希望 ViewChild 未定义，则需要渲染模板。一切都与时机有关。您正在尝试使用尚不存在的东西，这就是您遇到错误的原因。

您需要使用 angular 提供的 lifecycle 挂钩

在你的情况下，需要先渲染视图，所以我会使用 ngAfterViewInit() 和 static: false 以及 ngOnInit() 和 static: true

ngAfterViewInit(): void {
    this.size = this.wrapper.nativeElement.clientWidth - 36;
}

使用 @ViewChild 时 ElementRef 未定义

ElementRef is undefined when using @ViewChild

viewchild

angular

elementref