Угловой 2 Вложенный модальный диалог с Primeng не работает

Question

Я использую компонент диалога primeng, и у меня есть модальный диалог, из которого одним нажатием кнопки я хочу показать другое модальное диалоговое окно.

Что происходит, так это то, что мой второй модальный диалог не является действительно модальным, потому что я вижу только содержимое диалогового окна, следующего за кнопкой.

Я изменяю атрибут [appendTo] для p-диалога для второго модального диалога, но он не работает должным образом.

Как открыть вложенный диалог в 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; 
    }