Angular router-outlet breaking mat-grid-list

Question

我正在尝试创建一个非常简单的SPA，它有一个顶部工具栏和一些内容。

+-------------------------------------------+
|               mat-toolbar                 |
+-------------------------------------------+
|                                           |
|                                           |
|                                           |
|              router-outlet                |
|                                           |
|                                           |
|                                           |
+-------------------------------------------+

我希望<router-outlet>能填满剩余的空间。<router-outlet>将包含一个自定义组件<app-dashboard>，分为两列，每列占用可用空间的1/3和2/3。

我试图用<mat-grid-list>来实现这一点，但是它崩溃了。下面是我到目前为止得到的(<app-business>和<app-reservations>只是用lorem ipsum填充的)：

dashboard.component.html

<mat-grid-list cols="3" rowHeight="fit">
    <mat-grid-tile>
        <app-business></app-business>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="2">
        <app-reservations></app-reservations>
    </mat-grid-tile>
</mat-grid-list>

app.component.html

<mat-toolbar color="primary">
  <span>{{title}}</span>
  <span class="spacer"></span>
  <button mat-icon-button aria-label="Logout" title="Logout">
    <mat-icon>logout</mat-icon>
  </button>
</mat-toolbar>
<router-outlet></router-outlet>

任何提示都是非常感谢的。

编辑

这是一个显示我的设置的StackBlitz：https://stackblitz.com/edit/angular-ivy-bnkf7o

Answer 1

将CSS设置为mat-grid-tile

 mat-grid-tile 
   {
    min-height: 100vh;
    margin-top: 5px;
    overflow: scroll;
    }

这是更新后的URL。

https://stackblitz.com/edit/angular-ivy-yuwmvu?embed=1&file=src/app/dashboard/dashboard.component.css

Answer 2

我最终用CSS手动实现了网格。这并不有趣，我也不喜欢这个解决方案，但既然似乎没有其他办法……

app.component.html

<div class="container">
  <mat-toolbar color="primary">
    <span>{{title}}</span>
    <span class="spacer"></span>
    <button mat-icon-button aria-label="Logout" title="Logout">
      <mat-icon>logout</mat-icon>
    </button>
  </mat-toolbar>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

app.component.css

.spacer {
    flex: 1 1 auto;
}

mat-toolbar {
    flex: 0 0 auto;
}

.container {
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow: hidden;
}

.content {
    flex: 1 1 auto;
    min-height: 0;
}

dashboard.component.html

<div class="container">
    <app-business></app-business>
    <app-reservations></app-reservations>
</div>

dashboard.component.css

.container {
    display: flex;
    height: 100%;
}

app-business {
    flex: 1 1 0;
    overflow-y: auto;
}

app-reservations {
    flex: 2 1 0;
    overflow-y: auto;
}

我还使用解决方案派生了StackBlitz，但它没有显示正确的结果(我猜这是因为浏览器窗口是假的)。如果需要，考虑将其下载并在本地运行：https://stackblitz.com/edit/angular-ivy-jdgsfx