Как отключить нажатие кнопки в приложении Ionic 3 Angular, пока сообщение с тостом не будет отклонено? - PullRequest
Новая
       8

Как отключить нажатие кнопки в приложении Ionic 3 Angular, пока сообщение с тостом не будет отклонено?

0 голосов
/ 04 октября 2018

В настоящее время я использую кнопку, чтобы показать некоторую информацию в тосте.при нажатии кнопки на тосте появится сообщение.В настоящее время продолжительность тоста установлена ​​на 2 секунды.Мне нужно отключить нажатие кнопки на 2 секунды, когда тост активен, если он будет отклонен, кнопку можно будет нажать снова.т.е. мы не должны иметь возможность нажимать кнопку до тех пор, пока сообщение с тостами не исчезнет.

Вот мои реализации:

в моем HTML: 

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

В моем файле TS: 

message() {

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

    }

Я использую контроллер тостав службе сообщений: 

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 секунды.

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Вы можете изменить свой сервис так, чтобы он возвращал экземпляр 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>
0 голосов
/ 04 октября 2018

Вы можете использовать boolean variable, установленный на true в течение 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');
    }
}
...