使用Primeng的Angular 2嵌套模式對話框不起作用

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> 

當點擊whithin所述第一模態對話框的按鈕時，應該打開的第二對話。下面嵌套對話的定義：

<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> 

我可以打開的第一個對話框，但是當我點擊按鈕，打開第二個對話框，對話框的內容顯示出來像一個正常的股利。在呈現的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

定義一個componentref變量並使用[appendTo] =「Componentref」來解決問題。 查看討論https://github.com/primefaces/primeng/issues/656

Answer 2

您可以通過使用appendTo屬性將第二個對話框附加到文檔主體來解決此問題。

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

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; 
    }