Question

我正在尝试创建一个按钮，当按下该按钮时将其打开，当松开时将其关闭，类似于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')
    );

对于解决这个问题的任何建议或指示表示赞赏。

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

将离子切换更改事件转换为mouseup mousedown按钮单击

1 个答案: