[英]Angular 2 fire event after ngFor
I'm trying to use a jQuery plugin which replaces the default scrollbar inside some dynamic elements in Angular 2. 我正在尝试使用一个jQuery插件来替换Angular 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内部ngFor
的Observable
对象,以呈现视图。
Now, I would like to know when Angular finishes to draw my elements so that I can run the jQuery plugin. 现在,我想知道Angular完成绘制元素的时间,以便我可以运行jQuery插件。
ngAfterViewInit
, because this hooks is fired too many times 我不想使用ngAfterViewInit
,因为此挂钩被触发了太多次 I found a solution by using the following custom Pipe
: at the end of the ngFor
cycle in the template, I write: 我通过使用以下自定义Pipe
找到了解决方案:在模板的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 谢谢
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()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.