typescript 点击p-dialog关闭(X)按钮时如何调用Angular 函数?

rur96b6h  于 2023-03-31  发布在  TypeScript
关注(0)|答案(7)|浏览(151)

点击p-dialog关闭(X)按钮如何调用angular函数?

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

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

pvcm50d11#

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

dxxyhpgq

dxxyhpgq2#

尝试:(click)=“cancel()”代替。
我也遇到了同样的错误,但我用点击方法解决了它。Grettings:)

xqnpmsa8

xqnpmsa83#

只是为了补充上述,如果你的[(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() 
 }
}
ztyzrc3y

ztyzrc3y4#

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

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

在html中使用

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

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

uidvcgyl

uidvcgyl5#

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

2o7dmzc56#

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

zi8p0yeb7#

有一个简单的修复,文档中没有记录,但我在这个issue中找到了它。你只需要使用visbilevisibleChange属性将双向绑定拆分为单向绑定,如下所示:

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

相关问题