angular 2:在模板内使用光滑的旋转木马 [英] angular 2 : Using slick caroussel inside a template
问题描述
我在我的 angular 项目中使用圆滑的旋转木马作为组件;这个光滑的组件如下所示:
I use slick carousel as a component in my angular project ; this slick component is like below :
@Component({
selector: 'slick-slider',
template: `
<ng-content></ng-content>`,
styleUrls:['./slick.component.css']
})
export class SlickSliderComponent implements AfterViewInit{
@Input() options: [any];
$element: any;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
this.$element = jQuery(this.el.nativeElement).slick(this.options); }
}
在使用这个光滑组件的 foodComponent 模板中,我有一个包含 7 个选项卡列表的菜单,每个列表获取不同的内容:
in the template of foodsComponent who use this slick component I have a menu of 7 tab list each one fetch different content:
<ul class="resp-tabs-list">
<li (click)="onGetFoodsByCategorie(1)"></li>
<li (click)="onGetFoodsByCategorie(2)"></li>
<li (click)="onGetFoodsByCategorie(3)"></li>
..
..</ul>
<slick-slider class="slick-slider" *ngIf="foods" >
<div class="item" style="width: 450px;" *ngFor= "let food of foods">
<div class="thumbnail-menu-modern" >
..
..
</slick-slider>
加载页面时,光滑的工作正常,因为我在 foodComponent ngOnInit() {this.onGetFoodsByCategorie(1);}
上显示了此功能的第一个菜单原因但是当我点击任何菜单时,光滑的 dosnt 工作我发现发生这种情况的原因是因为插件本身彻底修改了由 *ngfor 生成的 html,使得 angular 无法更新中继器,因为它不再能够识别结构.如何 -.Uninitialize 插件.-.更新中继器.-.重新初始化插件.
Onload the page the slick work fine because I display the first menu cause of this function on foodsComponent ngOnInit() {this.onGetFoodsByCategorie(1);}
but when I click in any menu the slick dosnt work I find the reason why this is happening is because the plugin itself drastically modifies the html that is generated by the *ngfor leaving angular unable to update the repeater as it no longer can identify the structure.
How -.Uninitialize the plugin.
-.Update the repeater.
-.Reinitialize the plugin.
推荐答案
如果您使用的是 slick-slider 组件,我详细介绍了 这里 我想你需要稍微修改一下.我正在阅读滑块的规格此处,您有添加/删除幻灯片的方法.所以也许解决方法是向 slick-slider 组件添加一个新方法来更新滑块.像这样:
If you're using the slick-slider component I detailed here I think you'll need to modify it a little. I was reading the specs of the slider here and you have methods to add/remove a slide. So maybe the workaround would be adding a new method to the slick-slider component to update the sliders. Something like this:
update(elements: any[]) {
jQuery(this.el.nativeElement).slickRemove() //for each slide you have
jQuery(this.el.nativeElement).slickAdd('...') //for each new slide with the required template
}
尚未对此进行测试,但我认为这可能是可行的方法.
Haven't tested this, but I think this could be the way to go.
这篇关于angular 2:在模板内使用光滑的旋转木马的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!