angular - 呈现 div ngIf 时的事件

Question

我正在查看问题:https://stackoverflow.com/a/44737636/973651

我有一个带有 ngIf 条件的 div，我想在 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)
}