离子 2 切换防止默认答案

【问题标题】：Ionic 2 Toggle preventdefault离子 2 切换防止默认
【发布时间】：2017-01-12 17:44:06
【问题描述】：

我有一个拨动开关。我一开始不想选中或取消选中切换。准确地说，切换将根据服务器响应被选中或取消选中，这就是我需要使用preventDefault的原因。

我使用了ionChange() 而不是click() 事件处理程序。但是对于ionChange 处理程序，cancelable 或defaultPrevented 属性不存在。因此，它会引发 preventDefault() 不是函数的错误。但是，使用简单的单击处理程序，它不会引发任何错误，但也不起作用。我也试过stopPropagation()。

这是代码。

HTML：

<ion-item>
            <ion-toggle [(ngModel)]="appliance.state" (ionChange)="applianceChange($event)"></ion-toggle>
</ion-item>

TS：

import { Component, EventEmitter } from '@angular/core';

@Component({
  selector: 'appliances',
  templateUrl: 'appliances.html'
})
export class ApplianceModule {
  constructor(){}

 applianceChange(event: Event){
   event.preventDefault(); 
 }
}

【问题讨论】：

你找到解决方案了吗？

标签： angular ionic2 dom-events

【解决方案1】：

如果您禁用切换并以编程方式更改它会怎样。示例代码将每 1500 毫秒将 ion-toggle 切换为选中和取消选中

@Component({
  selector: 'my-page',
  template: `<ion-toggle #toggle disabled=""></toggle>`
})
export class MyPage implements OnInit {

  @ViewChild('toggle') ionToggle: Toggle;

  constructor() {
  }

  ngOnInit(){
    setInterval(() => {
      this.ionToggle._checked = !(this.ionToggle._checked);
    }, 1500);
  }

}

【讨论】：

【解决方案2】：

我遇到了同样的问题，我就是这样解决的：

<ion-item>
        <ion-toggle [(ngModel)]="isChecked" (ionChange)="applianceChange($event)"></ion-toggle>
</ion-item>

applianceChange(ev){
    if(ev._checked == this.isChecked){
        callAction();
    }
}

callAction(){
    ...
     this.appliance.state = this.isChecked //it's important to change value so it can react properly on ionChange
    ...
}

您需要将isChecked 声明为布尔值，并在调用服务器时在ngOnit 或构造函数中为其赋值。我希望这对某人有所帮助

【讨论】：