Question

我最近一直在将Angular材料用于我的前端框架，并且遇到了强烈的行为。

我有一个打算在MatDialog中显示的组件。首先，我创建了对话框，并给它一种样式来填充整个空间，这没关系。最近，我已将MatToolBar添加到该组件，但是显然，添加时它无法相应地工作。

我为此创建了stackblitz页面

https://angular-fg8tqz.stackblitz.io

我以以下方式打开两个对话框，分别占据屏幕的with和height的40％和60％。

const dialogRef = this.dialog.open(MyDialogComponent, {
  width: '40%',
  height: '60%',
  maxWidth: '100vw',
  maxHeight: '100vh',
  panelClass: 'no-padding-dialog'
});

由“ firstDialog”打开的MyDialogComponent是有问题的。我希望它在工具栏击中某个对话框溢出后，才能占据对话框大小的全宽和全高。

OpenSecondDialog是正确的一种，但缺少工具栏。我想像在firstDialog中一样添加到栏。

组件之间的唯一区别只是工具栏。

<!-- This one is missing in the MySecondDialogComponent hence works as expected -->
<mat-toolbar color="primary" class="box-shadow-none">
  <span>Application Title</span>
  <span fxFlex></span>
</mat-toolbar>
<div style="width: 100%; height: 100%;position: relative">
    <form >
        <mat-form-field >
            <input required matInput placeholder="Favorite food" value="Sushi">
        </mat-form-field>
        <mat-form-field >
            <textarea required matInput placeholder="Leave a comment"></textarea>
        </mat-form-field>
    </form>
  <button style="position: absolute; bottom: 0;width: 100%; 
                height: 50px;" mat-flat-button color="accent">Dialog Button</button>
</div>

MatDialog中显示的组件的高度不合适

0 个答案: