Question

我在这里创建了一个演示，在div的单个页面中打开一个对话框作为父容器。但全屏显示了整个页面。可以将对话框的宽度和高度设置为其父容器相同吗？

.html文件

<mat-toolbar color="primary">
  Angular Material 2 App
</mat-toolbar>
<div class="parent-container" fxLayout="row" fxLayoutAlign="center center" >
    <button (click)="openDialog()" mat-button>
      open dialog
    </button>
</div>

.ts文件

openDialog() {
    const dialog_ref = this.dialog.open(EntryComponent, {
      panelClass: ['full-screen']
    });

    dialog_ref.afterClosed().subscribe(result => {});
}

.css文件

.full-screen .mat-dialog-container {
  height: 100vh;
  width: 100vw;
  .mat-dialog-content {
    height: 100%;
    max-height: 85% !important;
  }
}

DEMO

Answer 1

您可以使用对父容器的引用，将其宽度和高度传递给openDialog（）函数，以便与dialog.open（）一起使用。例如：

<div #parent class="parent-container" fxLayout="row" fxLayoutAlign="center center" >
    <button (click)="openDialog(parent.clientWidth, parent.clientHeight)" mat-button>
        open dialog
    </button>
</div>

openDialog(width, height) {
    const dialog_ref = this.dialog.open(EntryComponent, {
        width: width + 'px',
        height: height + 'px'
    });

    dialog_ref.afterClosed().subscribe(result => {});
}

全屏对话框到父容器

1 个答案: