javascript - ngFor 之后的 Angular 2 火灾事件

Question

我正在尝试使用一个 jQuery 插件来替换 Angular 2 中某些动态元素内的默认滚动条。

这些元素是使用 ngFor 循环创建的，也就是说，我无法将 jQuery 事件附加到这些创建的元素上。

应用程序在某个时候改变了一个 Observable 对象，该对象在 ngFor 中循环以呈现 View 。

现在，我想知道 Angular 何时完成绘制我的元素，以便我可以运行 jQuery 插件。

• 我不想在 HTML 模板中包含任何 javascript。
• 我不想使用 ngAfterViewInit，因为这个钩子(Hook)被触发了太多次
• 我不想实现基于 setTimeout 的解决方案(我认为它不可靠)

我通过使用以下自定义 Pipe 找到了解决方案:在模板中的 ngFor 循环结束时，我写:

{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}

FireStoreEventPipe 是这样的:

transform(obj: any, args:any[]) {
    var event = args[0];
    //Fire event
    return null;
}

但这个方案并不令我满意。

有什么更好的建议吗？

谢谢

Answer 1

我遇到了类似的问题。 我正在使用 angular2 rc 1。

我通过创建一个新组件解决了这个问题(指令对我不起作用)。

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
   selector: 'islast',
   template: '<span></span>'
})
export class LastDirective {
   @Input() isLast: boolean;
   @Output() onLastDone: EventEmitter<boolean> = new EventEmitter<boolean>();
   ngOnInit() {
      if (this.isLast)
        this.onLastDone.emit(true);
   }
}

然后我在指令中将我想要的组件作为子组件导入:

directives: [LastDirective],

在 html 中:

<tr *ngFor="let sm of filteredMembers; let last = last; let i=index;" data-id="{{sm.Id}}">
     <td>
        <islast [isLast]="last" (onLastDone)="modalMembersDone()"></islast>
     </td>
 </tr>

当然还有实现 modalMembersDone()