angular 2:在模板内使用光滑的卡鲁塞尔 [英] angular 2 : Using slick caroussel inside a template

问题描述

我在角项目中使用圆盘传送带作为组件；这个光滑的组件如下所示:

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);  }
 }

在使用此光滑组件的foodsComponent模板中，我有一个包含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>

在页面上滑动效果很好，因为我在foodsComponent ngOnInit() {this.onGetFoodsByCategorie(1);}上显示了此功能的第一个菜单原因 但是，当我在任何菜单中单击时，都会发现光滑的Dosnt功能，这是因为插件本身会彻底修改* ng生成的html，从而导致角度无法更新转发器，因为它不再能够识别结构了，原因是. 如何-取消初始化插件. -.更新转发器. -.重新初始化插件.

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组件，我会详细说明此处阅读滑块的规格，并且您有添加/删除幻灯片的方法.因此，可能的解决方法是向滑动滑块组件添加新方法以更新滑块.像这样:

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屋！