ngFor之后的Angular 2火灾事件

本文介绍了ngFor之后的Angular 2火灾事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I'm trying to use a jQuery plugin which replaces the default scrollbar inside some dynamic elements in Angular 2.

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

These elements are created using an ngFor loop, that is I cannot attach the jQuery events to the elements these are created.

应用程序在某些时候会发生变异一个 Observable 对象，它在 ngFor 中循环，以呈现视图。

The application, at some point, mutates an Observable object which iscycled inside the ngFor in order to render the view.

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

Now, I would like to know when Angular finishes to draw my elements so that I can run the jQuery plugin.

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

• I don't want to include any javascript in the HTML template.
• I don't want to use the ngAfterViewInit, because this hooks is fired too many times
• I don't want to implement a setTimeout-based solution (I think it's not reliable)

我通过使用以下自定义 Pipe 找到了一个解决方案：在 ngFor 在模板中循环，我写道：

I found a solution by using the following custom Pipe: at the end of the ngFor cycle in the template, I write:

{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}

其中 FireStoreEventPipe 类似于：

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

但这个解决方案并不能让我满意。

But this solution does not satisfy me.

有关更好方法的建议吗？

Any suggestion for a better way?

谢谢

推荐答案

我有类似的问题。 我正在使用angular2 rc 1.

I had a similar problem. I am using angular2 rc 1.

我通过创建一个新组件解决了它（一个指令对我来说没有用）。

I solved it by creating a new component(a directive didnt work for me).

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

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

Then i imported in my wanted component as child component in the directives:

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（）

And of course implement modalMembersDone()