событие, когда div ngIf отображается

Question

Я смотрел на вопрос по адресу: https://stackoverflow.com/a/44737636/973651

У меня есть div с условием ngIf, и я хотел бы захватить событие, когда div будет обработан. Предположительно, вы можете использовать событие AfterContentInit. В статье, которую я цитировал выше, показан пример, который я воспроизвел, но мне не повезло заставить его работать.

Я не знаю, что я делаю неправильно, но я не могу заставить это работать. Я не получаю ошибок, но у меня это не работает.

Моя директива определяется как:

import { AfterContentInit, EventEmitter, Output, Directive } from '@angular/core';

@Directive({ selector: '[after-if]' })
export class AfterIfDirective implements AfterContentInit {
  @Output('after-if')
  public after: EventEmitter<AfterIfDirective> = new EventEmitter();

  public ngAfterContentInit(): void {
    debugger;
    setTimeout(() => {
      // timeout helps prevent unexpected change errors
      this.after.next(this);
    });
  }
}

В свой компонент страницы я импортирую.

import { AfterIfDirective } from '../directives/after-if';


@NgModule({
  providers: [],
  imports: [NgModel, BrowserAnimationsModule, HttpClientModule, 
      AfterIfDirective],
  exports: [NgModel, BrowserAnimationsModule, AfterIfDirective]
})

и в html:

<div *ngIf="chkTearline.checked; else NotTearline" (after-if)="Clicked()" >

что мне не хватает?

Разве это не работает в Angular 5?

  Clicked() {
    console.log('something got clicked');
  }

Answer 1

Вы можете использовать setter, как в примере ниже:

шаблон:

...
<div #elementToCheck *ngIf="expr"></div>
...

компонент:

@ViewChild('elementToCheck') set elementToCheck () {
  // here you get access only when element is rendered (or destroyed)
}