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

  [(visible)]="displayCaidas" 

    #dialogCaidas

>

.TS

import { Dialog } from 'primeng/dialog';

  openDialog(dialog: Dialog) {

    this.displayCaidas = true;

    dialog.maximized = true;

  }

Answer 3

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