我如何在Ionic 3 Angular应用程序中禁用按钮单击，直到取消祝酒消息？

Question

目前，我正在使用一个按钮来显示吐司中的一些信息。 单击按钮时，烤面包机将显示该消息。 当前，吐司持续时间设置为2秒。 吐司启动时，我需要在2秒钟内禁用按钮单击，如果它消失了，则按钮可以再次单击。 即，在吐司消息消失之前，我们不应该单击该按钮。

这是我的实现：

在我的HTML中：

<button ion-button class="my-button" type="button" full (click)="message()">
                            Click Me
                        </button>

在我的ts文件中：

message() {

        this.message.alert('Hi Welcome');

    } 

我在消息服务中使用Toast控制器，如下所示：

export class MessageService {

  constructor(public toastCtrl: ToastController) {}

  private toast(message: string) {
    const toast = this.toastCtrl.create({
      message: message,


      duration: 2000
    });
    toast.present();

  }

  error (message: string) {
    this.toast(message);
  }

  info(message: string) {
    this.toast(message);
  }

  warning(message: string) {
    this.toast(message);
  }


  alert (message: string) {
    this.toast(message);
  }
}

我实际上已经实现了吐司功能，但是我不知道如何暂时禁用按钮单击2秒钟。

Answer 1

您可以使用设置为true的boolean variable 2秒钟：

toastOpen: boolean = false;

private toast(message: string) {
    const toast = this.toastCtrl.create({
        message: message,
        duration: 2000
    });
    toast.present();

    this.toastOpen = true;

    // reset after 2 seconds
    setTimeout(() => {
        this.toastOpen = false;
    }, 2000);

    // alternative solution proposed by troy-myers:
    // toast.onDidDismiss(() => { this.toastOpen = false; }); }

使用此变量来禁用您的按钮：

<button ion-button class="my-button" type="button" full (click)="message()" [disabled]="toastOpen">
    Click Me
</button>

编辑：如果您还想阻止点击操作，请完全添加：

message() {
    if(!this.toastOpen) {
        this.message.alert('Hi Welcome');
    }
} 

Answer 2

您可以修改服务以返回Toast的实例，如下所示：

import { Toast } from 'ionic-angular';

export class MessageService {

  constructor(public toastCtrl: ToastController) {}

  private toast(message: string): Toast {
    const toast = this.toastCtrl.create({
      message: message,
      duration: 2000
    });

    return toast;
  }

  error (message: string): Toast {
    return this.toast(message);
  }

  info(message: string): Toast {
    return this.toast(message);
  }

  warning(message: string): Toast {
    return this.toast(message);
  }

  alert (message: string): Toast {
    return this.toast(message);
  }
}

然后在您的页面中创建一个新属性，以了解何时应启用/禁用按钮，并像下面这样修改message方法：

public isDisabled: boolean = false;

// ...

message() {

  // Disable the button
  this.isDisabled = true;

  const toast = this.message.alert('Hi Welcome');
  toast.onDidDismiss(() => {
     // Enable the button when the toast is dismissed
     this.isDisabled = false;    
  });

  // Show the toast
  toast.present();
} 

然后在按钮中使用该属性：

<button [disabled]="isDisabled" ion-button class="my-button" type="button" full (click)="message()">
  Click Me
</button>