带有PrimeNG的Angular 2嵌套模态对话框不起作用 [英] Angular 2 Nested Modal Dialog with PrimeNG doesn't work
问题描述
我正在使用PrimeNG对话框组件,并且有一个模态对话框,单击该按钮后,我想从中显示另一个模态对话框.
I am using the PrimeNG dialog component and I have a modal dialog from which, on the click of a button, I want to show another modal dialog.
发生的事情是我的第二个模式对话框不是真正的模式对话框,因为我只看到按钮后面的对话框内容.
What is happening is that my second modal dialog is not really modal, because I only see the content of the dialog following the button.
我确实更改了第二个模式对话框的p对话框的[appendTo]属性,但它似乎无法正常工作.
I do change [appendTo] attribute of the p-dialog for the second modal dialog but it does not seem to work properly.
如何在p对话框中打开嵌套对话框?
How can I open nested dialog in a p-dialog?
2号角组件中的对话框:
Dialog in a angular 2 component:
<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>
在第一个模式对话框中单击一个按钮时,应打开第二个对话框.在嵌套对话框的定义下方:
When clicking a button within the first modal dialog, should open a second dialog. Below the definition of the nested 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下方:
I can open the first dialog but when I click on the button to open the second dialog, the content of dialog shows up like a normal div. Below the html rendered:
<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>
推荐答案
定义componentref变量并使用[appendTo] ="Componentref"解决了该问题.参见讨论 https://github.com/primefaces/primeng/issues/656
Defining a componentref variable and using [appendTo]="Componentref" solve the issue. See discussion https://github.com/primefaces/primeng/issues/656
这篇关于带有PrimeNG的Angular 2嵌套模态对话框不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!