单击 p-dialog close(X) 按钮时如何调用 angular 函数？

Question

如何在点击 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) 按钮时调用一个事件。

Answer 1

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

Answer 2

试试：（点击）="cancel()"。

我也有同样的错误，但是我用点击的方法解决了。问候 :)

Answer 3

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

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

在html中用作

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

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

Answer 4

解决方法是使用布尔值显示 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;
        }
    }

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>

单击 p-dialog close(X) 按钮时如何调用 angular 函数？

How to call angular function when click p-dialog close(X) button?

angular

typescript

primeng

primeng-dialog