为什么sidenav只出现在angular中的header?

Why does the sidenav only appear in the header in angular?

为什么sidenav只出现在header?

我不知道出了什么问题。 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>

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

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

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