イオニアスライド - 前後にスライドを動的に追加する

Question

こんにちは私は開始時に左または右にスライドすることができることが保証されているので、中に開始しながら3つのスライドのセットを作成するためにngForを使用しています。

私は右にスライドすると、私は単純にreachEndを聞くことができ、ループしている配列に別のスライドをプッシュできます。

ただし、最初にスライドを追加する際に問題があります。上記と同じことをして、たとえばarray.unshift（）または展開して項目を最初に追加すると、ビューは位置0にあると考え、ビューを新しいスライドにスナップします。

次のコードは動作しますが、それはすべてのヘルプは高く評価され

slide = [0,1,2] //example to loop 
slideChanged(event) { 
    if(this.slides.isBeginning()){ 
     this.slide = [this.slide[0]-1, ...this.slide]; 
     this.slides.update(); 
     this.slides.slideTo(1) 
    } 
} 

<ion-slides [initialSlide]="1" (ionSlideDidChange)="slideChanged($event)"> 
    <ion-slide *ngFor="let item of slide"> 
     <h1>Slide {{item}}</h1> 
    </ion-slide> 
</ion-slides> 

インデックス1

にバックスライドの変更をアニメーション化！

Answer 1

SlidesのionSlideNextEndとionSlidePrevEndのイベントを使用してこれを行うことができます。 this working plunker

ビューを見てみてください

<ion-header> 
    <ion-navbar> 
    <ion-title>Dynamic slides Demo</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content> 
    <ion-slides #slider (ionSlideNextEnd)="loadNext()" (ionSlidePrevEnd)="loadPrev()" [initialSlide]="1"> 
     <ion-slide *ngFor="let n of numbers"> 
      <h2>Current slide: {{n}}</h2> 
     </ion-slide> 
    </ion-slides> 
</ion-content> 

コンポーネント

@Component({...}) 
export class HomePage { 
    @ViewChild('slider') private slider: Slides; 

    numbers = [0,1,2]; 
    firstLoad = true; 

    constructor() {} 

    loadPrev() { 
     console.log('Prev'); 
     let newIndex = this.slider.getActiveIndex(); 

     newIndex++; 
     this.numbers.unshift(this.numbers[0] - 1); 
     this.numbers.pop(); 

     // Workaround to make it work: breaks the animation 
     this.slider.slideTo(newIndex, 0, false); 

     console.log(`New status: ${this.numbers}`); 
    } 

    loadNext() { 
     if(this.firstLoad) { 
      // Since the initial slide is 1, prevent the first 
      // movement to modify the slides 
      this.firstLoad = false; 
      return; 
     } 

     console.log('Next'); 
     let newIndex = this.slider.getActiveIndex(); 

     newIndex--; 
     this.numbers.push(this.numbers[this.numbers.length - 1] + 1); 
     this.numbers.shift(); 

     // Workaround to make it work: breaks the animation 
     this.slider.slideTo(newIndex, 0, false); 

     console.log(`New status: ${this.numbers}`); 
    } 
}