typescript - 通知有关更改 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