呈现 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 中不起作用吗？

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

Answer 1

您可以setter在下面的示例中使用like：

模板：

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

成分：

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