角2火灾事件后ngFor。

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

我尝试使用一个jQuery插件，它用角2中的一些动态元素替换默认的滚动条。

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

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

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

在某些情况下，应用程序会对ngFor内部循环的可观察对象进行突变，以呈现视图。

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

现在，我想知道什么时候角结束绘制我的元素，以便我可以运行jQuery插件。

I don't want to include any javascript in the HTML template.
我不想在HTML模板中包含任何javascript。
I don't want to use the ngAfterViewInit, because this hooks is fired too many times
我不想使用ngAfterViewInit，因为这个钩子被多次触发
I don't want to implement a setTimeout-based solution (I think it's not reliable)
我不想实现基于settimeout的解决方案(我认为它不可靠)

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

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

{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}

Where FireStoreEventPipe is something like:

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?

有更好的办法吗?

Thanks

谢谢

1 个解决方案

#1

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

我也有类似的问题。我使用的是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],

In html:

在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>

And of course implement modalMembersDone()

当然实现了modalMembersDone()

#1