单击p对话框关闭（X）按钮时如何调用angular function？

Question

单击p对话框关闭（X）按钮时如何调用angular function？

我已经搜索并尝试了这个(onHide)="cancel()" 。 但它不起作用。 请分享您的解决方案。

我知道我们可以使用close/cancel按钮来隐藏弹出窗口。 但在我的场景中，我想在单击 (X) 按钮时调用一个事件。

Answer 1

实际上(onHide)="cancel()"根据这个Plunkr工作正常。

Answer 2

尝试： (click)="cancel()" 代替。

我有同样的错误，但我使用 click 方法解决了它。 问候 :)

Answer 3

您应该使用以下两个事件：

onBeforeHide: EventEmitter<any>;
onAfterHide: EventEmitter<any>;

在 html 中用作

(onBeforeHide)="onBeforeHide()"
(onAfterHide)="onAfterHide()"

参考： https : //github.com/primefaces/primeng/issues/956

Answer 4

一种解决方法是使用布尔值来显示 p 对话框

   [(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;
        }
    }

Answer 5

只需添加以上内容，如果您的[(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() 
 }
}

Answer 6

您可以使用 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>