Angular 12 ViewChild ElementRef

Question

在以前的 angular 版本中，我们可以像这样

定义一个带有元素引用的 viewchild

@ViewChild('fileInput') fileInput: ElementRef;

现在我们必须在构造函数中初始化它？如果没有默认的 nativeelement，我们如何为 elementRef 执行此操作？元素 Ref 接受一个参数 https://angular.io/api/core/ElementRef

constructor() {
    this.fileInput = new ElementRef(?);
}

Answer 1

如果要访问 ViewChild 元素，只能在 AfterViewInit/ 之后进行AfterViewChecked 生命周期已顺其自然。您不需要手动创建它，Angular 会为您完成。您可以在 Angular Example 2.

中看到这种情况

但是，请记住，在构造函数 ngOnInit 中无法访问它。

如果你想访问你自己的元素组件 ElementRef，你可以这样做：

@Component(...)
export class CustomComponent {
  constructor(elementRef: ElementRef) {
    // Code here or store it via an attribute accessor
  }
}

Answer 2

而不是：

@ViewChild('fileInput') fileInput: ElementRef;

使用：

@ViewChild('fileInput') fileInput!: ElementRef;

它应该可以正常工作。

viewchild