angular - 如何将角度侧边栏模式设置为“mat-sidenav”

Question

我是角度新手 我正在使用角度 8 我在我的项目中使用角度材料 我使用 mat-sidenav 我只想将其模式设置为“side”以与主要内容并排出现，但它确实不行 。它总是“over”或“push”这是我的html代码

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="'navigation'" mode="'side'" opened="false">
    <mat-toolbar>
      <a class="home-button" routerLink="/">
        <img class="app-logo" src="assets/home-logo.png" />
      </a>


    </mat-toolbar>
    <mat-nav-list class="navigation-list">
      <a class="navigation-item" mat-list-item routerLink="/route1" routerLinkActive="active">
        <mat-icon class="material-icons">create</mat-icon>

      </a>
      <mat-divider class="navigation-divider"></mat-divider>
      <a class="navigation-item" mat-list-item routerLink="/route2" routerLinkActive="active">
        <mat-icon class="material-icons">how_to_reg</mat-icon><span class="navigation-item-label">My second link</span>
      </a>
      <a class="navigation-item" mat-list-item routerLink="/route3" routerLinkActive="active">
        <mat-icon class="material-icons">add_comment</mat-icon><span class="navigation-item-label">My third link</span>
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content class="sidenav-content">

    <mat-toolbar class="sidenav-content-toolbar" color="primary">
      <div class="container">
      <div class="row align-items-start">
        <div class="col-1 d-flex justify-content-start">
          <button mat-icon-button class="menu-button" type="button" aria-label="Toggle sidenav" (tap)="drawer.toggle()">
            <i class="material-icons">menu</i>
          </button>
        </div>
        <div class="col">Welcome</div>
        <div class="col-4 d-flex justify-content-end">
          <button class="btn btn-primary">Logout</button>
        </div>
      </div>
      </div>

    </mat-toolbar>

    <router-outlet></router-outlet>
    <app-login></app-login>
  </mat-sidenav-content>
</mat-sidenav-container>

标签： angular