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)
}

渲染div ngIf时的事件

1 个答案: