点击p对话框关闭(X)按钮时如何调用角度函数？

Question

点击p对话框关闭(X)按钮时如何调用角度函数？

我已经搜索并尝试了这个

(onHide)="cancel()"

。但这不起作用。请分享您的解决方案。

我知道我们可以使用

close/cancel

按钮来隐藏弹出窗口。但在我的场景中，我想在单击 (X) 按钮单击时调用一个事件。

Answer 1

实际上

(onHide)="cancel()"

按照这个Plunkr工作得很好。

Answer 2

尝试：（点击）=“取消（）”。

我遇到了同样的错误，但我使用点击方法解决了它。 问候:)

Answer 3

只需添加上述内容，如果您的

[(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 4

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

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

在 html 中使用为

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

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

Answer 5

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

Answer 6

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

有一个简单的修复，文档中没有记录，但我在这个issue中找到了它。您只需使用

visbile

和

visibleChange

属性将两种方式绑定拆分为一种方式绑定，如下所示：

 <p-dialog header="My dialog" 
  [visible]="showDialog$ |async" 
  (visibleChange)="handleClose()"
 >

上面我使用 Angular 的异步管道来显示对话框，并使用 handleClose() 方法来关闭对话框。在

.ts

文件中，我可以注入一个服务，该服务使用一些可观察的布尔值，该值根据某些条件而变化。

export class HomeComponent implements OnInit {

  showDialog$!: Observable<boolean>;

  constructor(private homeService: HomeService) { }

  ngOnInit(): void {
    this.showDialog$ = this.homeService.displayDialog$;
  }
  handleClose() {
    this.homeService.toogleDisplayDialog();
  }
}

Answer 8

如果 [(visible)] 是常量，则可能不会触发(onHide)。

<p-dialog (onHide)="close()" [(visible)]="true">

如果这是导致问题的原因，只需向组件添加一个初始化为 true 的布尔值即可。

<p-dialog (onHide)="close()" [(visible)]="someBoolean">