イオン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; "もundefですinded。

これはなぜ機能しないのでしょうか？

ありがとうございます！

Answer 1

角テンプレート変数では、#variableNameのように宣言されているので、mySliderを#mySliderのion-slidesタグに変更する必要があります。

また、プロパティthis.mySliderには、コンテンツinitの後に#mySliderの値を割り当てる必要があります。したがって、どのような場合でもコンストラクタでは未定義です。

ngAfterContentInitライフサイクルフックを使用して、コンポーネントでスライダを取得します。

また、リリースしたばかりのIonic 2を使用している場合は、Slides APIがカードニュアルに変更されたことを確認する必要があります。