[英]How can I disable the button click in my Ionic 3 Angular app until the toast message gets dismissed?
Currently I am using a button to show some information in toast. 目前,我正在使用一个按钮来显示吐司中的一些信息。 when the button is clicked, the toast will display the message.
单击按钮时,烤面包机将显示该消息。 Currently, the toast duration is set to 2 seconds.
当前,吐司持续时间设置为2秒。 I need to disable the button click for the 2 seconds when the toast is active, if it gets dismissed,the button can be able to click again.
吐司启动时,我需要在2秒钟内禁用按钮单击,如果它消失了,则按钮可以再次单击。 ie, We should not be able to click the button until the toast message gets disappeared.
即,在吐司消息消失之前,我们不应该单击该按钮。
Here are my implementations: 这是我的实现:
in my HTML: 在我的HTML中:
<button ion-button class="my-button" type="button" full (click)="message()">
Click Me
</button>
In my ts file: 在我的ts文件中:
message() {
this.message.alert('Hi Welcome');
}
I am using the toast controller in message service as follows: 我在消息服务中使用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);
}
}
I have actually implemented the toast, but I don't know how to disable the button click temporarily for 2 seconds. 我实际上已经实现了吐司功能,但是我不知道如何暂时禁用按钮单击2秒钟。
You can use a boolean variable
that is set to true
for 2 seconds: 您可以使用设置为
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; }); }
Use this variable to disable your button: 使用此变量来禁用您的按钮:
<button ion-button class="my-button" type="button" full (click)="message()" [disabled]="toastOpen">
Click Me
</button>
Edit: If you also want to block the click action completly add: 编辑:如果您还想阻止点击操作,请完全添加:
message() {
if(!this.toastOpen) {
this.message.alert('Hi Welcome');
}
}
You could modify you service to return the instance of the Toast
, like this: 您可以修改服务以返回
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);
}
}
Then in your page create a new property to know when the button should be enabled/disabled and modify the message
method like this: 然后在您的页面中创建一个新属性,以了解何时应启用/禁用按钮,并像下面这样修改
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();
}
And then use that property in the button: 然后在按钮中使用该属性:
<button [disabled]="isDisabled" ion-button class="my-button" type="button" full (click)="message()">
Click Me
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.