离子 2 滑块未定义，选项不起作用

Question

我的离子2滑块（离子滑块）遇到了很大的问题。

起初我的代码:)

打字稿：

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Slides } from 'ionic-angular';
@Component({
  templateUrl: 'page.html'
})
export class WorkoutStartPage {
    @ViewChild('mySlider') mySlider:Slides;
    public itemList: Array<any>;
    public _options: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public appData: AppData) {
      console.log(this.mySlider); // undefinded
      this._options = {
          slidesPerView:2.5,
          pager: false,
          speed: 800,
          autoplay: 5000,
          effect: 'fade',
          fade: {
              crossFade: true
          },
          loop: 'true',
          autoplayDisableOnInteraction: false
      }
    }
  ionViewDidLoad() {
    this.appData.getItems().then((items:Array<any>) => {
        this.itemList = items;
    });
  }
}

我的模板：

<ion-content id="page-workout-start">
    <div class="c-headline c-headline--has-padding animated fadeIn">Title</div>
    <div *ngIf="itemList">
        <ion-slides class="c-item-list-slider animated fadeIn" [options]="_options" mySlider>
            <ion-slide *ngFor="let item of itemList">
                <div class="header-with-background">
                    <img src="{{item.image}}">
                    <div class="img-overlay animated fadeIn">
                        <h1 [innerHTML]="item.title"></h1>
                    </div>
                </div>
                <p>{{item.infos}}</p>
            </ion-slide>
        </ion-slides>
    </div>
</ion-content>

我的问题

离子滑块不带_options，"@ViewChild('mySlider') mySlider:Slides;"也是未被发现的。

有人知道为什么这不起作用吗？

多谢！

Answer 1

在 Angular 中，模板变量声明为 #variableName ，因此您需要将mySlider更改为#mySlider ion-slides标签。

此外，属性this.mySlider应在内容初始化后分配一个#mySlider值。因此，在任何情况下，它在构造函数中都是未定义的。

使用ngAfterContentInit生命周期挂钩在组件中获取滑块。

此外，如果您使用刚刚发布的 Ionic 2，那么您应该查看文档，因为幻灯片 API 发生了根本性的变化