アングル2：テンプレート内でスリックなカルーセルを使用する

Question

私は、角度のあるプロジェクトでは滑らかなカルーセルをコンポーネントとして使用します。

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

ロード時のページスリック：それぞれが異なるコンテンツを取得、私は7タブリストのメニューを持って、この滑らかなコンポーネントを使用foodsComponentのテンプレートに

@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 ngOnInit() {this.onGetFoodsByCategorie(1);} に表示するのでうまくいきますが、プラグイン自体が大幅に*が生成するhtmlを変更するため、これが起こっている理由を見つけたメニューをクリックすると、 ngforはリピータをそのまま更新することができませんもはや構造を識別することができません。 どのように - プラグインを初期化しないでください。 -.リピータを更新します。 -.プラグインを再初期化します。

Answer 1

滑らかなスライダーコンポーネントを使用している場合は、詳細hereを少し修正する必要があります。私はスライダーhereのスペックを読んでいて、スライドを追加/削除する方法があります。したがって、回避策は、スライダーを更新するための新しいメソッドをスライス・スライダー・コンポーネントに追加することです。このようなもの：

これはテストされていませんが、これはやり方になると思います。