[英]How to call angular function when click p-dialog close(X) button?
How to call angular function when click p-dialog close(X) button?单击p对话框关闭(X)按钮时如何调用angular function?
I have searched and just tried this
(onHide)="cancel()"
.我已经搜索并尝试了这个(onHide)="cancel()"
。 But it's not working.但它不起作用。 Kindly share your solutions.请分享您的解决方案。
I know we can use a close/cancel
button to hide the popup.我知道我们可以使用close/cancel
按钮来隐藏弹出窗口。 But in my scenario I want to call an event when clicking the (X) button click.但在我的场景中,我想在单击 (X) 按钮时调用一个事件。
实际上(onHide)="cancel()"
根据这个Plunkr工作正常。
Try: (click)="cancel()" instead.尝试: (click)="cancel()" 代替。
I had the same error but I solved it by using the click method.我有同样的错误,但我使用 click 方法解决了它。 Grettings :)问候 :)
You should to use two events follow:您应该使用以下两个事件:
onBeforeHide: EventEmitter<any>;
onAfterHide: EventEmitter<any>;
use in html as在 html 中用作
(onBeforeHide)="onBeforeHide()"
(onAfterHide)="onAfterHide()"
Refer: https://github.com/primefaces/primeng/issues/956参考: https : //github.com/primefaces/primeng/issues/956
A workaround is to use a boolean to display the p-dialog with一种解决方法是使用布尔值来显示 p 对话框
[(visible)]="myBoolean"
You set that boolean to true when you want to display the p-dialog Then use the (click) event.当您想显示 p-dialog 时,将该布尔值设置为 true 然后使用 (click) 事件。 For instance例如
(click)="doSomething($event)".
In your ts do在你的 ts 做
doSomething(event) {
// If we are clicking the close button and not something else
if (event.target.className === "fa fa-fw fa-close") {
myBoolean = false;
}
}
Just to add the above, If your [(visible)]="myBool_1 || myBool_2"
depends on multiple variable.只需添加以上内容,如果您的[(visible)]="myBool_1 || myBool_2"
取决于多个变量。
Clicking X
will try to set the last variable myBool_2
as false, we could leverage this by using a setter function.单击X
将尝试将最后一个变量myBool_2
设置为 false,我们可以通过使用 setter 函数来利用它。
so [(visible)]="isVisible"
所以[(visible)]="isVisible"
class component {
public get isVisible(): boolean {
return myBool_1 || myBool_2
}
public set isVisible(val: boolean) {
this.myBool_1 = this.myBool_2 = val;
this.doSomethingOnClose()
}
}
You can use the onHide EventEmitter, here the (alternative working method) sample code for the ts and html.您可以使用 onHide EventEmitter,这里是 ts 和 html 的(替代工作方法)示例代码。
TS: TS:
import {
...
ViewChild,
...
} from '@angular/core';
import { Dialog } from 'primeng/dialog';
...
@ViewChild('testDialog') testDialog: Dialog;
...
onTestDialogClose() {
const subscription = this.testDialog.onHide.asObservable().subscribe((_) => {
// Do the action here
subscription.unsubscribe();
});
}
HTML: HTML:
<p-dialog #testDialog></p-dialog>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.