イオン2 - オープン/クローズ

Question

のイオン日時のCSSスタイル私のイオン-2アプリでstartDateとendDateピッカーを持っている：

<ion-row> 
    <ion-col width-50> 
     <ion-item class="eventCal-datePicker active"> 
      <ion-label>From</ion-label> 
      <ion-datetime #startdatepicker displayFormat="DD/MM/YYYY" (ngModelChange)="startDateChange($event)" [(ngModel)]="startDate"></ion-datetime> 
     </ion-item> 
    </ion-col> 
    <ion-col width-50> 
     <ion-item class="eventCal-datePicker"> 
      <ion-label>To</ion-label> 
      <ion-datetime #enddatepicker displayFormat="DD/MM/YYYY" (ngModelChange)="endDateChange($event)" [(ngModel)]="endDate"></ion-datetime> 
     </ion-item> 
    </ion-col> 
</ion-row> 

私は、次のロジックを適用したい：

• 新しい日付がstartDateに割り当てられると、endDateが起動されます。アクティブion-datetimeピッカーの
• ホルダー（ion-itemは）私はこのコードを使用して他のピッカーを開くために管理

適切active CSSクラスを持っている必要があります：私はやって管理していない何

startDateChange(val) { 
    this.startDate = val; 

    //check whether startDate > endDate and asssign later date in case it is 

    //fire endDate picker 
    setTimeout(() => this.endDatePicker.open(), 0); 
} 

は、ピッカーが起動され、閉じられたときに、cssクラスion-itemを変更することです。私はion-datetime要素も持っていることに気づいた.TS

Answer 1

内の変数yourDynamicClassNameへ

Answer 2

ion-item [class]="yourDynamicClassName" 

割り当てクラス名(click)属性：setEndDatePickerClass()インサイド

<ion-datetime #enddatepicker (click)="setEndDatePickerClass()" ... 

私が呼ぶ：

this.endDatePicker._isOpen 

t cssクラスを決定したり、新しいクラスを割り当てるために：

this.endDatePicker._elementRef.nativeElement.className 

重要!!
遅延が目立つことに注意してください。イベントの発生順序はわかりませんが、すべてのユーザーのケースで動作させるためにはいくつかのアクロバットを実行する必要がありました。