角路由器插座破坏垫网格列表答案

【问题标题】：Angular router-outlet breaking mat-grid-list角路由器插座破坏垫网格列表
【发布时间】：2021-02-20 05:58:17
【问题描述】：

我正在尝试创建一个非常简单的带有顶部工具栏和一些内容的 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

【问题讨论】：

标签： angular angular-material angular-router

【解决方案1】：

将 CSS 设置为 mat-grid-tile

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

这是更新后的网址。

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

【讨论】：

感谢您查看它，但这不是我想要的（虽然它很接近）。我想要实现的是一个非滚动页面（但仅限于内部内容）。另外，在您的 StackBlitz 中，内容会被删减。

【解决方案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

【讨论】：