"离子幻灯片"选项"已被弃用",现在是什么？

Question

我正在尝试实现Ionic2的幻灯片,但我找不到如何设置设置:

离子幻灯片"选项"已被弃用.请改用ion-slide的输入属性.

我可以找到'输入属性'(例如自动播放,速度,方向),但我不知道在哪里放置它.我觉得每一个例子确实[options]="slideOptions"在那里slideOptions都是设置,但导致没有结果等,弃用的通知.

我是离子v2和打字稿的新手,我可能会得到一个hacky解决方案来工作,但我想做得对.

---

HTML中包含ion-content:

<ion-slides [options]="slideOptions">
    <ion-slide *ngFor="let item of items">
        <img width="20%"src="{{item.thumb.source}}">
    </ion-slide>
</ion-slides>

简化的类:从'ionic-angular'导入{Slides};

@Component({
  selector: 'page-example',
  templateUrl: 'example.html'
})

export class Example {
    public items: any;
    private slideOptions: any;

    @ViewChild(Slides) slides: Slides;

    constructor(private navCtrl: NavController, public navParams: NavParams) {
        this.items = [];
        this.albumInfo = navParams.get('item');

        this.getSlides();
    }

    // This does nothing:
    goToSlide() {
        this.slides.slideTo(2, 500);
    }
    // This  does nothing:
    ngAfterViewInit() {
        this.slides.autoplay = 2000;
    }


    // Simple example of getting the slides
    makeGetRequest():Promise<string> {      
        /* Get the items code, populates this.items
    }
}

Answer 1

离子载玻片已经改变.确保您已更新到最新的离子版本(2.0)网站中列出的输入属性可以直接在html中使用.例如:

<ion-slides pager loop autoplay="2000">
 <ion-slide> ... </ion-slide>
</ion-slides>

要使用输入属性中列出的属性以外的属性,可以在HTML中使用变量.

<ion-slides #slides> 
   ...
</ion-slides>

并在TS中使用它:

 import { Component, ViewChild } from '@angular/core';
 import {Slides} from 'ionic-angular'

export class Example {
    @ViewChild(Slides) slides: Slides;
    constructor() {}
    ngAfterViewInit() {
        this.slides.autoplay = 2000;
        this.slides.autoplayDisableOnInteraction = false;
   }
}

在你的情况下,ngAfterViewInit什么都不做,因为你没有在你的html中定义你的变量<ion-slides #slides>