我在我的应用程序中使用离子切换。当用户点击（检查）离子切换时，我在离子切换上写了离子改变钩子。在这个钩子中，由于应用程序逻辑，我给用户提示离子切换不能设置。

使用event.prevent默认设置为防止离子切换

组件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>

字符串

组件挂钩GiftSelect

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
              });
         }

    }

使用子视图

使用本机元素

这段代码也不工作。2任何人都可以帮助我得到正确的方法来防止离子切换组件防止切换在离子改变事件。

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;
    }