角度 2：在模板中使用光滑的轮播答案

【问题标题】：angular 2 : Using slick caroussel inside a template角度 2：在模板中使用光滑的轮播
【发布时间】：2017-08-13 00:20:32
【问题描述】：

我在我的 Angular 项目中使用 slick carousel 作为组件；这个光滑的组件如下所示：

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

在使用这个 slick 组件的 foodsComponent 模板中，我有一个包含 7 个选项卡列表的菜单，每个选项卡都获取不同的内容：

<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 工作我发现发生这种情况的原因是因为插件本身极大地修改了由 *ngfor 生成的 html，导致 angular 无法更新转发器，因为它不再能够识别结构. 如何 -.Uninitialize 插件。 -.更新中继器。 -.重新初始化插件。

【问题讨论】：

标签： jquery angularjs angular typescript angular2-forms

【解决方案1】：

如果您使用的是我详细介绍的 slick-slider 组件here，我认为您需要对其进行一些修改。我正在阅读滑块 here 的规格，并且您有添加/删除幻灯片的方法。所以也许解决方法是向 slick-slider 组件添加一个新方法来更新滑块。像这样的：

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
}

尚未对此进行测试，但我认为这可能是要走的路。

【讨论】：