Angular - 工具栏被抽屉而不是sidenav隐藏答案

【问题标题】：Angular - toolbar being hidden by drawer instead of sidenavAngular - 工具栏被抽屉而不是sidenav隐藏
【发布时间】：2019-04-15 17:40:01
【问题描述】：

我正在尝试创建一个类似于仪表板的界面，其中顶部有一个持久的标题工具栏，左侧有一个可折叠的侧导航。我一直在这里和那里尝试了很多事情，这和我得到的一样接近：

HTML：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()">
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/']">Home</a>
      <a mat-list-item [routerLink]="['/locations']">Current Destinations</a>
      <a mat-list-item [routerLink]="['/orders']">Today's Orders</a>
      <a mat-list-item [routerLink]="['/logout']">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="top-bar" color="primary">
      <span>App Title</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

CSS：

.sidenav-container {
    height: 100%;
}

.sidenav {
    display: flex;
    width: 200px;
    box-shadow: 3px 0 6px rgba(0,0,0,.24);
}
.top-bar {
    position: fixed;
    top: 0;
    z-index:1000;
}

问题在于 sidenav 保持在原位，顶部工具栏与路由器插座内容一起被隐藏。它需要反过来，但我似乎无法理解。 This answer 到另一个问题很接近，但在这种情况下，左侧的链接最终会出现在滚动条中，该滚动条不会超出顶部工具栏的底部。此外，它似乎使用了旧版本的 Material Design 或其他东西。我错过了什么？

【问题讨论】：

如果您可以提供包含代码的 stackblitz 链接将对您有所帮助
我创建了一个，但没有加载。我不确定为什么。尽管如此，它里面有代码 - 不确定它是否有帮助，但它是：stackblitz.com/edit/angular-ygytu8 编辑：没关系，我让它工作了 - 现在应该没问题了。

标签： css angular html layout angular-material2

【解决方案1】：

当我偶然发现 Material 网站上的一个 stackblitz 示例时，我终于解决了这个问题。这是文章：

Material - Creating a Responsive Layout for Mobile App Desktop

下面是它的 stackblitz 示例：

https://stackblitz.com/angular/pymganppqmm

【讨论】：