使用 primeng 动态对话框打开全屏模式

Question

我正在使用 PrimeNg 模态扩展在我正在处理的 Angular webapp 之一中显示模态弹出窗口。我将一个组件传递给模态服务，如下面的代码所示：

const ref = this.dialogService.open(LogsComponent, {

            data: {

                releaseID:row.release_id

            },

            header:'Migration Logs',

            width:'100%', 

            height:'100%'

        });

我得到了ID我通过的并且能够在模式中显示表格。现在的问题是，即使我给出100%宽度和高度，模态也不会全屏显示。我想让模态最大化，就像 PrimeNg 对话框一样。

Answer 1

把这些放到 styles.css 中。它接受所有对话框，如果你只想这个，然后提供自定义类并使用自定义类名更改 ui-dialog.ui-dialog {    max-height: 100%;}.ui-dialog .ui-dialog-content {    height: 100%;}自定义类const ref = this.dialogService.open(LogsComponent, {            data: {                releaseID:row.release_id            },            header:'Migration Logs',            width:'100%',             height:'100%',            styleClass:"customModal"        });在 styles.css 中.customModal {    max-height: 100%;}.customModal .ui-dialog-content {    height: 100%;}

Answer 2

这对我有用！.HTML(click)="openDialog(dialogCaidas)"<p-dialog&nbsp; [(visible)]="displayCaidas"&nbsp;&nbsp; &nbsp; #dialogCaidas>.TSimport { Dialog } from 'primeng/dialog';&nbsp; openDialog(dialog: Dialog) {&nbsp; &nbsp; this.displayCaidas = true;&nbsp; &nbsp; dialog.maximized = true;&nbsp; }

Answer 3

你可以为你的对话框使用 maximizable='true'