离子框架 - 无法阻止离子切换

Question

我在我的应用中使用离子切换。当用户点击（检查）离子切换时，我已经在ion-toogle上写了ionChange钩子。在这个钩子中，由于应用程序逻辑，我给用户提示无法设置ion-toggle。

使用event.preventDefault来阻止离子切换切换

组件html

<ion-content padding>
     <ion-slides pager="true">
    <ion-slide *ngFor="let giftSlide of giftsAllMatrix" >
    <ion-row *ngFor="let giftRecord of giftSlide">
      <ion-col *ngFor="let giftCol of giftRecord" col-6>
        <img src="./assets/{{giftCol.giftImage}}" >
          <p> gift code :  {{ giftCol.giftCode }} </p>
          <ion-item>
         <ion-toggle   #giftSelect (ionChange)="onGiftSelect(giftCol.giftCode, giftCol.pointsRequired ,giftCol.giftImage,giftSelect.checked,giftSelect,$event)" checked="false"></ion-toggle>
          </ion-item> 
        </ion-col>
    </ion-row>
    </ion-slide>
    </ion-slides>

组件钩子 - onGiftSelect

onGiftSelect( giftSelCode : string , 
           pointsRequired : number ,
           giftImage : string , 
            selected : boolean 
           ,giftSelect : any,
           event : Event)
      {
         console.log("inside onGiftSelect "+giftSelCode);
         console.log("inside onGiftSelect  points required "+pointsRequired);
         console.log(" selected "+selected );
         console.log(" this.giftSelectedFlg "+this.giftSelectedFlg );
         let navigate = true;
         // if ion-toggle is true then only navigate 
         // when toggle is from 'selected' to 'deselected' do not 
         if ( selected === true)
         {
            if ( this.giftSelectedFlg  === false )
            {
                this.giftSelectedFlg = true;
            } 
            else
            {

                if(isProdSetup() === true)
                {
                    this.toast.show( "Select one gift at time ", '3000', 'center').subscribe
                    ( toast => 
                    {
                        console.log(toast);
                    });
                }
                else
                {
                     let alert = this.alertCtrl.create({
                     title: 'Gift selection',
                     subTitle: 'Multiple gift selection disallowed',
                     buttons: ['Dismiss']
                     });
                     alert.present();
                }
              navigate = false;
              event.preventDefault();
        }
         if ( navigate)
        {
           // Pass the control to giftSelect page 
           this.navCtrl.push("Giftselect",
              {
                 giftCode : giftSelCode ,
                 pointsRequired : pointsRequired ,
                 giftImage : giftImage
              });
         }

    }

使用viewchild

使用nativeElement

此代码也不起作用。任何人都可以帮我正确地防止离子切换组件阻止在ionChange事件中切换。

 export class Giftfactory {
      giftsAllMatrix : GiftCatalogueEntry[][][];
      gifts : Array<any> ;
      totalPoints : number = 0;
      error : string;
      giftSelectedFlg : boolean = false;
      giftChoice : any;
      //giftSelect :  any; //template variable.
     @ViewChild ('giftSelect') gtSel ;

onGiftSelect( giftSelCode : string , 
           pointsRequired : number ,
           giftImage : string , 
            selected : boolean 
           ,giftSelect : any,
           event : Event)
    {
    ...
        // trying to uncheck ion-toggle - does not work
        this.gtSel.nativeElement.checked = false;
    }

Answer 1

ion-toggle tag

<ion-toggle  #giftSelect (ionChange)="onGiftSelect(giftCol.giftCode, giftCol.pointsRequired ,giftCol.giftImage,giftSelect.checked,giftSelect,$event)" checked="false"></ion-toggle>

切换事件处理程序

使用模板参考变量giftSelect访问离子切换。 giftSelect传递给事件处理程序。使用checked属性设置切换关闭。

 onGiftSelect( giftSelCode : string , 
               pointsRequired : number ,
               giftImage : string , 
                selected : boolean 
               ,giftSelect : any)
   {
      //make toggle off ,depending on the application logic.
      giftSelect.checked = false;

   }