p-dialog onHide 在 angular 2 组件中不起作用 - primeng [英] p-dialog onHide not working in angular 2 component - primeng

问题描述

我在 angular 2 应用程序中使用 Primeng 并面临这个问题 (stackoverflow 问题)

I'm using primeng in an angular 2 application and facing this issue (stackoverflow question)

虽然接受的答案中提供的 plunkr 有效，但在我的情况下却没有.我有一个单独的组件，它根据来自父组件的输入加载 .我想在子组件关闭/隐藏时切换可见性标志.

Although the plunkr provided in the accepted answer works but it doesn't in my scenario. I have a separate component that loads the based on an input from the parent component. I want to toggle the visibility flag when the child component is closed/hidden.

这是代码片段

 <p-dialog header="Assets Management" [(visible)]="showDialog" modal="modal" [closable]="true" (onHide)="close()" appendTo="body">
          .. some content ..
  </p-dialog>

在组件中，我有:

@Component({
    selector: 'view-car-colors',
    templateUrl: '/view-car-colors.html',
    inputs: ['showDialog'],
    outputs: ["onCloseDialog"],
})
export class ViewCarColorsComponent {
    private showDialog: boolean = false;    //default close
    private onCloseDialog: EventEmitter<any> = new EventEmitter();

    public close(): void {
        this.showDialog = false;
        //emit this to its parent
        this.onCloseDialog.emit({ hasChanges: true });
    }
}

最后在我的父组件中，我这样称呼它:

And finally in my parent component, I am calling it like:

<view-car-colors [showDialog]="showCarColorsDialog" (onCloseDialog)="onCarColorsCloseDialog($event)"></view-car-colors>

其中 showCarColorsDialog 根据按钮点击而改变.

Where showCarColorsDialog is changed based on a button click.

private onCarColorsCloseDialog($event: any): void {
    this.showCarColorsDialog = false;
    if ($event.hasChanges) {
        //fetch the changes again
        this.getCarColors();
    }
}

我在多个地方使用过primeng 控件，它们都可以正常工作，但只是有这个问题，所以我确定这不是因为版本.

I have used the primeng controls on multiple places and they all work fine but just has this issue so I'm sure it can't be because of the version.

推荐答案

try (onAfterHide)="close()".

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

这篇关于p-dialog onHide 在 angular 2 组件中不起作用 - primeng的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！