单击另一个离子切换后如何禁用离子切换一段时间？答案

【问题标题】：How to disable ion-toggle for some time after another ion-toggle clicked?单击另一个离子切换后如何禁用离子切换一段时间？
【发布时间】：2019-07-03 12:40:29
【问题描述】：

我的 Ionic 应用程序中有两个离子开关。在单击另一个离子切换后，我需要禁用 ion-toggle 5 秒钟。如何做到这一点？

这是我的代码：

<ion-item>
  <ion-label>Share in Pinterest</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Share in Instagram</ion-label>
  <ion-toggle ></ion-toggle>
</ion-item>

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

您可以使用disabled 的disabled 属性和ionChange 事件来实现您所需要的。

HTML

<ion-content padding>
<ion-item>
  <ion-label>Share in Pinterest</ion-label>
  <ion-toggle disabled="{{disablePin}}" (ionChange)="toggle('P')"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Share in Instagram</ion-label>
  <ion-toggle disabled="{{disableIns}}" (ionChange)="toggle('I')"></ion-toggle>
</ion-item>
</ion-content>

export class HomePage {

  disablePin: boolean = false;
  disableIns: boolean = false;

  constructor() {}

  toggle(type): void {

    if (type === 'I') {
      this.disablePin = true;

      setTimeout(() => {
        this.disablePin = false;
      }, 5000);
    }
    if (type === 'P') {
      this.disableIns = true;
      setTimeout(() => {
        this.disableIns = false;
      }, 5000);
    }
  }
}

查找工作演示 here

【讨论】：