单击 p-dialog close(X) 按钮时如何调用 angular 函数?
How to call angular function when click p-dialog close(X) button?
如何在点击 p-dialog close(X) 按钮时调用 angular 函数?
I have searched and just tried this (onHide)="cancel()"
. But it's not working. Kindly share your solutions.
我知道我们可以使用 close/cancel
按钮来隐藏弹出窗口。但在我的场景中,我想在单击 (X) 按钮时调用一个事件。
实际上 (onHide)="cancel()"
根据此 Plunkr 工作正常。
试试:(点击)="cancel()"。
我也有同样的错误,但是我用点击的方法解决了。
问候 :)
您应该使用如下两个事件:
onBeforeHide: EventEmitter<any>;
onAfterHide: EventEmitter<any>;
在html中用作
(onBeforeHide)="onBeforeHide()"
(onAfterHide)="onAfterHide()"
解决方法是使用布尔值显示 p-dialog
[(visible)]="myBoolean"
当你想显示 p-dialog 时,你将该布尔值设置为 true
然后使用 (click) 事件。
例如
(click)="doSomething($event)".
在你的 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;
}
}
只是添加以上内容,如果您的 [(visible)]="myBool_1 || myBool_2"
取决于多个变量。
单击 X
将尝试将最后一个变量 myBool_2
设置为 false,我们可以通过使用 setter 函数来利用它。
所以[(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()
}
}
您可以使用 onHide EventEmitter,这里是 ts 和 html.
的(替代工作方法)示例代码
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:
<p-dialog #testDialog></p-dialog>
如何在点击 p-dialog close(X) 按钮时调用 angular 函数?
I have searched and just tried this
(onHide)="cancel()"
. But it's not working. Kindly share your solutions.
我知道我们可以使用 close/cancel
按钮来隐藏弹出窗口。但在我的场景中,我想在单击 (X) 按钮时调用一个事件。
实际上 (onHide)="cancel()"
根据此 Plunkr 工作正常。
试试:(点击)="cancel()"。
我也有同样的错误,但是我用点击的方法解决了。 问候 :)
您应该使用如下两个事件:
onBeforeHide: EventEmitter<any>;
onAfterHide: EventEmitter<any>;
在html中用作
(onBeforeHide)="onBeforeHide()"
(onAfterHide)="onAfterHide()"
解决方法是使用布尔值显示 p-dialog
[(visible)]="myBoolean"
当你想显示 p-dialog 时,你将该布尔值设置为 true 然后使用 (click) 事件。 例如
(click)="doSomething($event)".
在你的 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;
}
}
只是添加以上内容,如果您的 [(visible)]="myBool_1 || myBool_2"
取决于多个变量。
单击 X
将尝试将最后一个变量 myBool_2
设置为 false,我们可以通过使用 setter 函数来利用它。
所以[(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()
}
}
您可以使用 onHide EventEmitter,这里是 ts 和 html.
的(替代工作方法)示例代码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:
<p-dialog #testDialog></p-dialog>