我正在尝试使用jQuery插件替换Angular 2中某些动态元素中的默认滚动条.
这些元素是使用ngFor循环创建的,也就是说我无法将jQuery事件附加到创建的元素上.
在某些时候,应用程序会改变一个Observable对象,该对象在ngFor中循环以呈现视图.
现在,我想知道Angular何时完成绘制我的元素,以便我可以运行jQuery插件.
>我不想在HTML模板中包含任何javascript.
>我不想使用ngAfterViewInit,因为这个钩子被触发了太多次
>我不想实现基于setTimeout的解决方案(我认为它不可靠)
我通过使用以下自定义管道找到了一个解决方案:在模板的ngFor周期结束时,我写道:
{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}
FireStoreEventPipe的位置如下:
transform(obj: any, args:any[]) {
var event = args[0];
//Fire event
return null;
}
但是这个解决方案并不能让我满意.
有什么更好的方法吗?
谢谢
解决方法:
我遇到了类似的问题.
我正在使用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()