时间戳

首页 > 解决方案 > 启动可恢复 p-dialog 组件

angular - 启动可恢复 p-dialog 组件

问题描述

在我的 Angular 应用程序中，我想创建一个primeng p-dialog 组件，它可以在不同的组件中重复使用。以下是我的实现，但 p-dialog 组件不显示为弹出窗口（作为对话框），它显示在父组件下方。

日志组件.html

<app-primeng-dialog 
    [isvisible]="showDialog">
</app-primeng-dialog>

日志组件.ts

showDialogWindow() 
{
this.showDialog  = true;
}

对话框组件.ts

export class DialogComponent implements OnInit {
  @Input isvisible;
  ngOnInit() {
  }

}

对话框组件.html

<div>
    <div *ngIf="isvisible">
        <div class="col-md-12 text-center p-1">
            <p-dialog [(visible)]="isvisible" [modal]="true" [responsive]="true"
                [style]="{width: '250px', minWidth: '100px', height:'350px', 'text-align': 'center'}" [minY]="70"
                [maximizable]="false" [baseZIndex]="10000" [closeOnEscape]="true" [closable]="false" position="top">
                <button type="button" pButton  label="Ok" class="ui-button"></button>
                &nbsp;
                <button type="button" pButton label="Cancel" class="ui-button"></button>

            </p-dialog>
        </div>
    </div>
</div>

标签： angularprimeng

解决方案

我不知道您为什么会遇到这种问题，但是我有一个工作示例，您的代码可以正常工作。请查看下面的 stackblitz 链接=>
Stackblitz Demo Link。

注意：不要showDialog在DialogComponent. 如果你这样做，那么弹出的 Modal 将显示一次，然后不会再次显示。这就是我@Output() deleteSelf = new EventEmitter<any>();在代码中使用的原因。

推荐阅读