问题描述
当我刷新窗口时,滑块工作正常,但是当我转到另一个组件并在加载相同的组件后,滑块将无法工作。当我再次刷新时,滑块工作正常。我需要这个滑块,因为我想一张一张地滑动,所以这是最好的,但我不知道为什么它在没有刷新窗口的情况下无法工作。我可以将一个组件加载到另一个组件,但是每次重定向到滑块组件时如何刷新组件。
Component.html
<owl-carousel #owlElement [options]="SlideOptions" [items]="images"
[carouselClasses]="['owl-theme','sliding',owl-carousel]">
<div class="item">
<a class="red" href="#">Site1</a>
</div>
<div class="item">
<a class="red" href="#">Site2</a>
</div>
<div class="item">
<a class="red" href="#">Site3</a>
</div>
<div class="item">
<a class="red" href="#">Site4</a>
</div>
<div class="item">
<a class="red" href="#">Site5</a>
</div>
<div class="item">
<a class="green" href="#">Site6</a>
</div>
<div class="item">
<a class="green" href="#">Site7</a>
</div>
<div class="item">
<a class="green" href="#">Site8</a>
</div>
</owl-carousel>
组件.ts
export class AppComponent implements OnInit {
@ViewChild('owlElement',{static: true}) owlElement: OwlCarousel;
constructor() { }
ngOnInit() {
this.refreshSlider();
}
Images = ['../assets/images/Carousel1.jpeg','../assets/images/Carousel2.jpeg','../assets/images/Carousel3.jpeg'];
SlideOptions = {
items: 10,autoplay: true,loop: true,dots: false,responsive: {
0: {
items: 1
},600: {
items: 3
},960: {
items: 5
},1200: {
items: 6
},1300: {
items: 10
}
},};
CarouselOptions = {
items: 1,};
refreshSlider(){
console.log(this.owlElement);
this.owlElement.refresh();
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)