angular2数据绑定完成后初始化jssor滑块

angular2数据绑定完成后初始化jssor滑块,angular,rxjs,jssor,Angular,Rxjs,Jssor,我正在尝试在angular2应用程序中初始化jssor滑块。滑块图像和视频从服务器加载。但是滑块初始化在滑块容器之前 slider.component.ts @Component({ moduleId: module.id, selector: 'slider', directives:[VideoComponent], providers:[SliderService], templateUrl: 'slider.component.html',

我正在尝试在angular2应用程序中初始化jssor滑块。滑块图像和视频从服务器加载。但是滑块初始化在滑块容器之前

slider.component.ts

@Component({
    moduleId: module.id,
    selector: 'slider',
    directives:[VideoComponent],
    providers:[SliderService],
    templateUrl: 'slider.component.html',
    styleUrls:['./slider.component.css']
})
export class SliderComponent implements OnInit {

    bannerData:any;
    jssorSlider:any;
ngOnInit() {
        this.banners();
    }
    banners(){
        this._sliderService.getBanners()
            .subscribe((result)=>{
                this.bannerData = result;
                if(this.bannerData){
                    this.setUpSlider();
                }
            })
    }

    setUpSlider(){
        var jssor_slider1 = new $JssorSlider$("slider1_container", this.options);
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                if (parentWidth) {
                    jssor_slider1.$ScaleWidth(parentWidth - 30);
                }
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
 }
}
slider.component.html

<div class="container slider-container" >


        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1140px; height: 442px;
        overflow: hidden;">
            <div  *ngFor="let item of bannerData">
                <img *ngIf="item.video_id == 0" u="image" src='{{item.image}}' />
                <single-video *ngIf="item.video_id>0" u="image" [initialData]="item"> In single video </single-video>
            </div>
        </div>

</div>

在单个视频中

html加载完成后,是否有方法调用setUpSlider()?提前谢谢

在ngAfterViewInit内调用函数(在Angular创建组件视图后调用)。我试过了。但它不起作用:(Hi@Shuvo我正在尝试相同的方法。你找到解决方案了吗?在ngAfterViewInit中调用你的函数(在Angular创建组件视图后调用)。我尝试了。但它不起作用:(Hi@Shuvo我正在尝试相同的方法。你找到解决方案了吗?