Ionic2 ion-toggle在ionChange上获得价值

Question

我在这里切换:

<ion-toggle (ionChange)="notify(value)"></ion-toggle>

当我点击这个时我想调用方法notify通过参数传递toggle值.我如何获得切换值？

谢谢!

Answer 1

就像你在Ionic2 Docs - Toggle中看到的那样,更好的方法是使用ngModel 将切换绑定到组件中的属性.

组件代码:

public isToggled: boolean;

// ...

constructor(...) {
  this.isToggled = false;
}

public notify() {
  console.log("Toggled: "+ this.isToggled); 
}

视图:

<ion-toggle [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>

这样,您不需要发送值,因为它已经是组件中的属性,您始终可以通过使用获取值this.isToggled.

UPDATE

就像@ GFoley83在评论中提到的那样:

当ionChange直接绑定时,要非常小心ngModel.当值绑定ngModel更改时,将通过某人单击切换从视图或通过代码在组件中进行更改来调用notify方法,例如当您执行新的GET调用时.我最近遇到了一个问题,即单击切换触发a PATCH,这意味着每个其他客户端会PATCH在绑定到切换的数据发生更改时自动触发.

我们用过: <ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle>解决这个问题

Answer 2

您可以使用$event在ionChange.

视图:

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

控制器:

notify(event) {
   console.log(event.checked);   
}

Answer 3

有2种检查方式。

第一个就像@Chathuranga Silva 建议的那样

html

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

ts

notify(event: any) { console.log("toggled: "+event.target.checked); }

第二个是这样的：

html

<ion-toggle (ionChange)="notify()" [checked]="isToggled"></ion-toggle>

ts

var isToggled: boolean = true;

notify() {
  console.log("toggled: "+ this.isToggled); 
}

您选择哪一个取决于您，我推荐第二个，因为在构造函数/onInit 中操作切换会更容易，并且在notify()方法外使用此值也更容易。