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

时间:2016-09-25 12:28:55

标签: angular rxjs jssor

我正在尝试在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()?提前致谢。

0 个答案:

没有答案