仅在创建元素后，才使用@ViewChild获得html元素

Question

我有一个Angular组件，其模板中带有html元素。我希望能够在某个Observable发出任何值时创建该元素。因此，我已经将像这样的元素编码了

<div #myDiv *ngIf="myObs | async"> this is my div </div>

其中myObs是可观察的。

同时，我想以编程方式管理此元素，因此我像这样使用ViewChild

@ViewChild('myDiv') myDiv: ElementRef;
....
ngAfterViewInit() {
  const myNativeElement = this.myDiv.nativeElement;
  doStuffWith(myNativeElement);
}

我的问题是，当ngAfterViewInit运行时，this.myDiv为null，并且只有在myObs发出之后才创建。

我想知道哪种方法才是确保仅在实际创建doStuffWith(myNativeElement)时执行this.myDiv的最佳方法。

This is a sample code to reproduce the case。

Answer 1

我会在@ViewChild上使用二传手：

@ViewChild('myDiv') set myDiv(myDiv: ElementRef) {
    doStuffWith(myDiv.nativeElement);
}

一旦*ngIf变成true，将调用二传手。

您还可以通过使用私有属性并在设置器中进行设置来保留对元素的引用。