Angular v4 und Swiper: Mehrere Instanzen von Swiper auf der gleichen Seite

Question

Ich benutze Angular v.4 und Swiper.js und ich habe ein Problem mit mehreren Instanzen von swiper. Über den Anwendungsfall: Aus meiner Sicht habe ich eine mehr Instanzen derselben Komponente (Slider-Detail):

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

und das ist mein Slider-detail.component.html Komponente:

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

und das ist mein Slider-detail.component.ts Komponente:

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

} 

Nun, wenn die Route ändern, möchte ich (ngOnDestroy()), um die this._swiper zu zerstören, aber ich erhalte diese Fehlermeldung:

this._swiper.destroy is not a function

Wenn ich die this._swiper drucken, bevor this._swiper.destroy() Ich habe eine Reihe von Swiper-Instanzen. Um die Instanz zu zerstören, muss ich dies tun._swiper [index] .destroy() aber ich habe nicht den Index.

Wie kann ich es beheben? Hast du andere Lösungen? Kann ich die Instanz zur Klasse und nicht global umbrechen?

Danke!

Answer 1

Bevor Sie das neue swiper-Objekt hinzufügen, ermitteln Sie die Länge des aktuellen swiper-Instanzen-Arrays. Das sollte dein Index sein.

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