将 ion-toggle 更改事件转换为 mouseup mousedown 按钮单击答案

【问题标题】：Turn ion-toggle change event into a mouseup mousedown button click将 ion-toggle 更改事件转换为 mouseup mousedown 按钮单击
【发布时间】：2018-03-06 06:01:33
【问题描述】：

我正在尝试创建一个按钮，按下时将其打开，松开时将其关闭，类似于 mouseup 和 mousedown 事件。我有一个使用 ionic 运行的示例，并希望使用以下按钮实现以下 (onPowerSwitchChange)：

<button ion-button round large outline 
(click)="onPowerSwitchChange(event)">Button</button>`

来自这个（原文）：

<ion-item>
<ion-label>Power</ion-label>
<ion-toggle [(ngModel)]="power" (ionChange)="onPowerSwitchChange($event);">
</ion-toggle>
</ion-item>`

我在想我需要修改 .ts 来实现一种灯的按钮开关。

Ts：

onPowerSwitchChange(event) {
    console.log('onPowerSwitchChange');
    let value = this.power ? 1 : 0;
    let buffer = new Uint8Array([value]).buffer;
    console.log('Power Switch Property ' + this.power);
    this.ble.write(this.peripheral.id, LIGHTBULB_SERVICE, SWITCH_CHARACTERISTIC, buffer).then(
      () => this.setStatus('Light is ' + (this.power ? 'on' : 'off')),
      e => this.showAlert('Unexpected Error', 'Error updating power switch')
    );

感谢任何解决此问题的建议或指导。

【问题讨论】：

标签： angular cordova ionic-framework ionic3 phonegap

【解决方案1】：

this 是你的想法吗？

您可以使用 ngStyle 指令有条件地设置按钮样式，以区分切换状态和释放状态。

  <button ion-button [ngClass]="{'toggled':buttonActivated}" (click)="toggleButton()">
      <span *ngIf="!buttonActivated">Turn ON</span>
      <span *ngIf="buttonActivated">Turn OFF</span>
    </button>

在类中正确设置 buttonActivated 变量

export class HomePage {

  appName = 'Ionic App';
  buttonActivated = false;
  constructor(public navController: NavController) { }
  toggleButton(){
    this.buttonActivated = !this.buttonActivated;
  }
}

【讨论】：