更改Angular2时通知指令

Question

我有问题，请帮忙解决我有一个带有模板的组件

ul(slider)
    li(*ngFor="let car of getRecentCars()")
        car-poster(bcg="{{car.recentBackgroundUrl}}",  image="{{car.indexImage}}")

和指令滑块

@Directive({
    selector: '[slider]'
})
export class sliderDirective{
    private el: HTMLElement;
    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
        let _this = this;
        setTimeout(function(){
            $(_this.el).slick({
                infinite: false,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        }, 0);

    }
}

但该指令是在组件中的数据之前触发的如何做到这一点可以推迟启动指令呈现组件

Answer 1

您可以利用组件/指令生命周期挂钩，如ngAfterViewChecked:

这是一个示例：

@Directive({
    selector: '[slider]'
})
export class sliderDirective{
    private el: HTMLElement;
    constructor(@Inject(ElementRef) private elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
    }
    ngAfterViewChecked() {
      $(this.el).slick({
             infinite: false,
             slidesToShow: 1,
             slidesToScroll: 1
      });
    }
}

有关更多详细信息，请参阅此文档：

• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html