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