IONIC中slides的使用方式

html页面 

 <ion-slides pager>
    <ion-slide *ngFor="let slide of slides;let i=index">
      <ion-toolbar style="min-height: 45px;">
        <ion-buttons center>
          <button ion-button color="primary">{{slide.imgName}}</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.src" class="slide-image"  (press)="ImgPress()"/>    
    </ion-slide>   
  </ion-slides>   

 ts页面

import { ViewChild } from '@angular/core';

 @ViewChild(Slides) componentSlides: Slides;

  //长按删除图片
  ImgPress() {
    var id;
    var index = this.componentSlides.getActiveIndex();
    if (index < this.slides.length) {
      id = this.slides[index].id;
    } else {
      id = this.slides[index - 1].id;
    }

    for (var i = 0; i < this.slides.length; i++) {
      if (this.slides[i].id == id) {
        this.slides.splice(i, 1);
        //如果删除的是最后一张图片，删除完后直接跳转到上一张图片
        if (i + 1 === this.componentSlides.length()) {
          this.componentSlides.slideTo(i - 1);
        }
        break;
      }
    }

    //判断图片删除完后，是否还有图片，如果没有，则退出
    if (this.slides.length == 0) {
      this.navCtrl.pop();
    }
  }

  //默认将删除图标隐藏掉,显示用户点击的图片
  ionViewWillEnter() {
    this.componentSlides.slideTo(this.clickIndex, 0);
  }