angular2数据绑定完成后初始化jssor滑块
我正在尝试在angular2应用程序中初始化jssor滑块。滑块图像和视频从服务器加载。但是滑块初始化在滑块容器之前 slider.component.tsangular2数据绑定完成后初始化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',
@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我正在尝试相同的方法。你找到解决方案了吗?