"ion-slides "选项“已被弃用”，现在呢？

Question

我正在尝试实施 Ionic2's Slides，但我找不到设置方法：

ion-slides "options" has been deprecated. Please use ion-slide's input properties instead.

我可以找到 'input properties'（例如 自动播放、速度、方向 ），但我不知道该放在哪里。我找到的每个示例都会 [options]="slideOptions" ，其中 slideOptions 是设置，但是除了已弃用的通知之外，没有其他结果。

我是 ionic v2 和 typescript 的新手，我可能会得到一个 hacky 解决方案来工作，但我想做对。

ion-content中的HTML:

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

和简化的 class：从 'ionic-angular';

导入 { 幻灯片 }

@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

输入属性表示仅在ion-slides的html中设置的属性和输出事件是html 事件。例如：

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

其中 num 是具有特定数值的组件中的变量。

Answer 2

ion-slides 已更改。确保您已更新到最新的 ionic 版本 (2.0) site中列出的输入属性可以直接在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>

"ion-slides "选项“已被弃用”，现在呢？

"ion-slides "options" has been deprecated", now what?

typescript

ionic2

ion-slides