Question

我正在使用PrimeNG对话框组件，我有一个模态对话框，单击按钮，我想显示另一个模态对话框。

发生的事情是我的第二个模态对话框不是真正的模态，因为我只看到按钮后面的对话框内容。

我确实更改了第二个模态对话框的p对话框的[appendTo]属性，但它似乎无法正常工作。

如何在p对话框中打开嵌套对话框？

角度2分量中的对话框：

<p-dialog header="Create/Edit Financial Flow"  [visible]="display$ | async" modal="modal" width="500" height="600" responsive="true" [resizable]="false" [closable]="false">
<financial-flowdialog #myfinancialflowdialog (onCloseDialog) ="closeDialog()" [flowdata]="selectedFlows$ | async"></financial-flowdialog>
</p-dialog>

在第一个模态对话框中单击按钮时，应打开第二个对话框。在嵌套对话框的定义下面：

    <p-dialog header="Title" [(visible)]="display" [appendTo]="body" *ngIf="display" modal="modal" width="500" height="600" responsive="true"
        [resizable]="false" [closable]="false">
        <div class="container-fluid">
            <form (ngSubmit)="onSubmit()">

                <div class="pull-right top-buffer ">
                    <button type="button" class="btn btn-primary" (click)="closeDialog()">Cancel</button>
                    <button type="submit" class="btn btn-primary">Select</button>
                </div>
            </form>
        </div>
    </p-dialog>
    <button type="button" #mybtn [value]="value" ngDefaultControl [formControlName]="key" [id]="key" [ngStyle]="style" (click)="openDialog()">{{label}}</button>

我可以打开第一个对话框但是当我点击按钮打开第二个对话框时，对话框的内容就像普通的div一样显示出来。在渲染的html下面：

<section>
    <div id="nestediag" ng-reflect-form="[object Object]" class="ng-pristine ng-invalid ng-touched">
        <!--template bindings={
  "ng-reflect-ng-if": "true"
}--><p-dialog header="Title" height="600" modal="modal" responsive="true" width="500" ng-reflect-visible="true">
            <div class="container-fluid">
                <form class="ng-untouched ng-pristine ng-valid">

                    <div class="pull-right top-buffer ">
                        <button class="btn btn-primary" type="button">Cancel</button>
                        <button class="btn btn-primary" type="submit">Select</button>
                    </div>
                </form>
            </div>
        </p-dialog>
        <button ngdefaultcontrol="" type="button" value="Select a payee" ng-reflect-name="flowpayee" ng-reflect-ng-style="[object Object]" ng-reflect-value="Select a payee" ng-reflect-id="flowpayee" id="flowpayee" class="ng-pristine ng-valid ng-touched" style="width: 100%;">Select a payee</button>
    </div>
</section>

Answer 1

您可以通过使用appendTo属性将第二个对话框附加到文档正文来解决此问题，例如

<p-dialog appendTo="body">
...
</p-dialog>

Answer 2

定义componentref变量并使用[appendTo] =“Componentref”解决问题。请参阅讨论https://github.com/primefaces/primeng/issues/656

Answer 3

这对我有用

<p-dialog #parentDialog id='parentDialog' name='parentDialog' header='Parent Dialog #1' modal='modal' [(visible)]='display1'>
  <p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
  <p-dialog #childDialog header='Child Dialog #2' modal='modal' [(visible)]='display2' appendTo='body'>
    1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 
    <p-footer>
      <button pButton type='button' (click)='display2=false' class='ui-button-primary' label='Close'></button>
    </p-footer>
  </p-dialog>
  <button type='text' (click)='showDialog2()' pButton icon='fa-external-link-square' label='Show'></button>
</p-dialog>
<button type='text' (click)='showDialog1()' pButton icon='fa-external-link-square' label='Show'></button>

和打字稿：

  display1: boolean = false;
  showDialog1() {
    this.display1 = true;
  }
  display2: boolean = false;
  showDialog2() {
    this.display2 = true;
  }

与PrimeNG的Angular 2嵌套模态对话框不起作用

3 个答案: