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

Question

为什么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>

Answer 1

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

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

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

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

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

angular

sidenav

mat-sidenav