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

Question

我正在使用 PrimeNg 模式扩展在我正在开发的 Angular Web 应用程序之一中显示模式弹出窗口。我将一个组件传递给模态服务，如以下代码所示：

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

您可以在对话框中使用 maximizing='true'

Answer 4

假设您使用提供的可最大化选项来初始化对话框：

 this.dialogRef = this._dialogService.open(ChildComponent, {
        data: {
            item: this.childData,
        },
        header: 'Dialog Header',
        width: '70%',
        contentStyle: { overflow: 'auto' },
        baseZIndex: 100,
        autoZIndex: true,
        maximizable: true
    });

打开对话框后您可以做的就是在 DialogService 中为对话框实例设置 maximized = true

        this._dialogService.dialogComponentRefMap.forEach( x => {
            x.instance.maximized = true;
        });
        this._cdr.detectChanges();
    

Answer 5

对于使用 p-dialog 标签的 primeng ~13，您可以执行以下操作：

<p-dialog #dialog (onShow)="dialog.maximize()">dialog text</p-dialog>