angular - 为什么sidenav只以角度出现在标题中？

Question

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

Answer 1

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

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

希望能帮助到你。快乐编码！