Angular v4 et Swiper: plusieurs instances de Swiper sur la même page

Question

J'utilise Angular v.4 et Swiper.js et j'ai un problème avec plusieurs instances de swiper. Au-dessus du cas d'utilisation: À mon avis, j'ai plusieurs instances d'un même composant (curseur-détail):

<section class="tv-container"> 

    <section *ngIf="creditsTv.cast.length > 0"> 
    <slider-detail [items]="creditsTv.cast" [title]="'Top Billed Cast'" [url]="'/main/tv/wall/popular'"></slider-detail> 
    </section> 

    <section> 
    <slider-detail [items]="similarTv.results" [title]="'Similar'" [url]="'/main/tv/wall/popular'"></slider-detail> 
    </section> 

    <section *ngIf="recommendationsTv.results.length > 0"> 
    <slider-detail [items]="recommendationsTv.results" [title]="'Recommendations'" [url]="'/main/tv/wall/popular'"></slider-detail> 
    </section> 

</section> 

et ceci est mon curseur -detail.component.html composant:

<section class="list-section"> 
    <h1 class="title-section"> 
    {{title}} 
    </h1> 
    <div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide" *ngFor="let item of items"> 
      <slide-credit [item]="item"></slide-credit> 
     </div> 
    </div> 
    <div class="swiper-button-prev swiper-button-white"></div> 
    <div class="swiper-button-next swiper-button-white"></div> 
    </div> 
</section> 

et ceci est mon curseur -detail.component.ts composant:

import { Component, Input, OnInit, AfterViewInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core'; 

@Component({ 
    selector: 'slider-detail', 
    templateUrl: './slider-detail.component.html', 
    styleUrls: ['./slider-detail.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class SliderDetailComponent implements OnInit, OnDestroy { 

    @Input() items: any; 
    @Input() title: string; 
    @Input() url: string; 

    private _swiper: any; 

    constructor() { } 

    ngOnInit() { 
    } 

    ngAfterViewInit() { 
    // Initialize Swiper 
    this._swiper = new Swiper('.swiper-container', { 
     initialSlide: 0, 
     direction: "horizontal", 
     slidesPerView: "auto", 
     slidesPerGroup: 2, 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     slidesOffsetBefore: 0, 
     slidesOffsetAfter: 0, 
     observer: true, 
     observeParents: true 
    }); 
    } 

    ngOnDestroy() { 
    // this._swiper.update(true); 
    this._swiper.destroy(); 
    } 

} 

Maintenant, quand changer la route, je veux détruire (ngOnDestroy()) le this._swiper mais j'obtiens cette erreur:

this._swiper.destroy is not a function

Si j'imprimer la this._swiper avant de this._swiper.destroy() , J'ai un tableau d'instance de swiper. Donc pour détruire l'instance, je dois faire this._swiper [index] .destroy() mais je n'ai pas l'index.

Comment puis-je résoudre ce problème? Avez-vous d'autres solutions? Puis-je placer l'instance en classe et non globalement?

Merci!

Answer 1

Avant d'ajouter le nouvel objet swiper, obtenez la longueur du tableau d'instances swiper actuel. Cela devrait être votre index.

let index: number = this._swiper.length - 1; 
if (index < 0) { 
    index = 0; 
}