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和＆＃34; @ViewChild('mySlider') mySlider:Slides;＆＃34;也是未定的。

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

非常感谢！

Answer 1

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

在内容init之后，还应为属性this.mySlider分配#mySlider值。所以在任何情况下都没有在构造函数中定义。

使用ngAfterContentInit生命周期钩子将滑块放入组件中。

此外，如果你刚刚发布了Ionic 2，那么你应该检查文档为Slides API更改基数

Ionic 2滑块未定义且选项不起作用

1 个答案: