PrimeNg p-dialog 未集中在第一个显示器上答案

【问题标题】：PrimeNg p-dialog not being centered on first displayPrimeNg p-dialog 未集中在第一个显示器上
【发布时间】：2018-06-27 19:18:45
【问题描述】：

我正在构建一个 Angular 2 应用程序，并正在构建一个对话框模式表单，使用 PrimeNg p-dialog。我注意到在某些情况下，对话框窗口显示在屏幕的最左侧（而不是居中）。但是，在拖动浏览器窗口时，对话框会正确居中。

我正在使用一个非常简单的对话框（根据 primeng documentation），然后将 display 设置为 true：

<p-dialog header="Title" [(visible)]="display">
    Content
</p-dialog>

任何想法为什么对话框没有从一开始就居中？

【问题讨论】：

【解决方案1】：

这对我有用：

从组件中我得到一个对对话框的引用，如下所示：

import { Dialog } from 'primeng/dialog';
...
@ViewChild(Dialog) dialog;

在导致对话框打开的函数中，我在 setTimeout 中调用 center 方法。

window.setTimeout(() => { this.dialog.center(); });

【讨论】：

【解决方案2】：

在进一步调查后，我发现问题在于对话框被包裹在 ngIf 中。去掉之后，定位就更正了。

【讨论】：

【解决方案3】：

我遇到了类似的问题。对话框位置在屏幕的最右侧。

在我的例子中，我使用了 responsive 属性，因此我必须为 width 属性设置一个特定的宽度。

<p-dialog  
    width="640"
    modal="modal" 
    dismissableMask="true" 
    [responsive]="true"
    [(visible)]="display">

【讨论】：