为什么sidenav只以角度出现在标题中？答案

【问题标题】：Why does the sidenav only appear in the header in angular?为什么sidenav只以角度出现在标题中？
【发布时间】：2020-08-26 04:11:40
【问题描述】：

为什么sidenav只出现在标题中？

我不知道出了什么问题。 app.component.html：

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation">
    <app-sidenav-list (closeSidenav)="sidenav.close()"></app-sidenav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>

header.component.html：

<mat-toolbar  color="primary">
    <div fxHide.gt-xs>
        <button mat-icon-button (click)="onToggleSidenav()">
          <mat-icon>menu</mat-icon>
        </button>
      </div>
</mat-toolbar>

和sidenav-list.component.html：

<mat-nav-list>
  <a mat-list-item routerLink="/signup" (click)="onClose()">
    <mat-icon>face</mat-icon>
    <span class="nav-caption">Signup</span>
  </a>
  <a mat-list-item routerLink="/login" (click)="onClose()">
    <mat-icon>input</mat-icon>
    <span class="nav-caption">Login</span>
  </a>
  <mat-list-item>
    <button mat-icon-button (click)="onClose()">
      <mat-icon>eject</mat-icon>
      <span class="nav-caption">Logout</span>
    </button>
  </mat-list-item>
</mat-nav-list>

【问题讨论】：

标签： angular sidenav mat-sidenav

【解决方案1】：

将app.component.css 中的CSS 高度属性添加到主机和mat-sidenav-container。也可以添加到body。

:host, body, .mat-sidenav-container { height: 100vh }

希望对您有所帮助。编码愉快！

【讨论】：