点击p-dialog关闭(X)按钮如何调用angular函数?
我已经搜索并尝试了这个(onHide)="cancel()"。但它不工作。请分享您的解决方案。
(onHide)="cancel()"
close/cancel
pvcm50d11#
实际上,根据Plunkr,(onHide)="cancel()"可以正常工作。
dxxyhpgq2#
尝试:(click)=“cancel()”代替。我也遇到了同样的错误,但我用点击方法解决了它。Grettings:)
xqnpmsa83#
只是为了补充上述,如果你的[(visible)]="myBool_1 || myBool_2"依赖于多个变量.单击X将尝试将最后一个变量myBool_2设置为false,我们可以通过使用setter函数来利用这一点。所以[(visible)]="isVisible"
[(visible)]="myBool_1 || myBool_2"
X
myBool_2
[(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() } }
ztyzrc3y4#
您应该使用以下两个事件:
onBeforeHide: EventEmitter<any>; onAfterHide: EventEmitter<any>;
在html中使用
(onBeforeHide)="onBeforeHide()" (onAfterHide)="onAfterHide()"
参考:https://github.com/primefaces/primeng/issues/956
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; } }
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>
zi8p0yeb7#
有一个简单的修复,文档中没有记录,但我在这个issue中找到了它。你只需要使用visbile和visibleChange属性将双向绑定拆分为单向绑定,如下所示:
visbile
visibleChange
<p-dialog header="My dialog" [visible]="showDialog$ |async" (visibleChange)="handleClose()" >
上面我使用Angular的异步管道来显示对话框,并使用handleClose()方法来关闭对话框。在.ts文件中,我可以注入一个服务,该服务使用一些基于某些条件而变化的布尔值的可观察值。
.ts
export class HomeComponent implements OnInit { showDialog$!: Observable<boolean>; constructor(private homeService: HomeService) { } ngOnInit(): void { this.showDialog$ = this.homeService.displayDialog$; } handleClose() { this.homeService.toogleDisplayDialog(); } }
7条答案
按热度按时间pvcm50d11#
实际上,根据Plunkr,
(onHide)="cancel()"
可以正常工作。dxxyhpgq2#
尝试:(click)=“cancel()”代替。
我也遇到了同样的错误,但我用点击方法解决了它。Grettings:)
xqnpmsa83#
只是为了补充上述,如果你的
[(visible)]="myBool_1 || myBool_2"
依赖于多个变量.单击
X
将尝试将最后一个变量myBool_2
设置为false,我们可以通过使用setter函数来利用这一点。所以
[(visible)]="isVisible"
ztyzrc3y4#
您应该使用以下两个事件:
在html中使用
参考:https://github.com/primefaces/primeng/issues/956
uidvcgyl5#
解决方法是使用布尔值显示p对话框
当你想显示p-dialog时,你可以将这个布尔值设置为true,然后使用(click)事件。
在你的ts做
2o7dmzc56#
您可以使用onHide EventEmitter,这里是ts和html的示例代码(替代工作方法)。
TS:
HTML:
zi8p0yeb7#
有一个简单的修复,文档中没有记录,但我在这个issue中找到了它。你只需要使用
visbile
和visibleChange
属性将双向绑定拆分为单向绑定,如下所示:上面我使用Angular的异步管道来显示对话框,并使用handleClose()方法来关闭对话框。在
.ts
文件中,我可以注入一个服务,该服务使用一些基于某些条件而变化的布尔值的可观察值。