Держитесь за элемент html с помощью @ViewChild только после того, как элемент создан

Question

У меня есть угловой компонент с HTML-элементом в его шаблоне.Я хочу иметь возможность создавать элемент, когда определенный Observable испускает любое значение.Поэтому я закодировал элемент, подобный этому

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

, где myObs - Наблюдаемое.

В то же время я хочу управлять этим элементом программно и поэтому использую ViewChild какthis

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

Моя проблема в том, что когда ngAfterViewInit выполняется, this.myDiv является нулевым и только после того, как myObs испускает его, он создается.

Мне интересно, какой путь лучшеубедитесь, что doStuffWith(myNativeElement) выполняется только при фактическом создании this.myDiv.

Это пример кода для воспроизведения регистра .

Answer 1

Я бы использовал установщик на @ViewChild:

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

Установщик будет вызываться, как только *ngIf станет true.

Вы также можете сохранить ссылку насвой элемент, используя личное свойство и устанавливая его в сеттере.