代码之家 › 专栏 › 技术社区 › Shift 'n Tab

父容器的全屏对话框

angular-material2 angular

0

Shift 'n Tab · 技术社区 · 8 年前

我在这里创建了一个演示,在一个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

1 回复 | 直到 8 年前

1

0

G. Tranter 8 年前

可以使用对父容器的引用将其宽度和高度传递给openDialog()函数,以便与一起使用对话框.打开(). 例如:

<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 => {});
}