angular - 如何正确使用 mat-sidenav？

Question

我有一个带有工具栏和侧面导航栏的简单设计。一旦我添加了 mat-sidenav-container 部分，它就会停止预览页面。关于 sidenav 栏不起作用，我做错了什么？

这是我的 app.component.html 文件。这个评论的 mat-sidenav-container 部分不起作用。

<!-- Toolbar -->
<div class="toolbar" role="banner">
  <img width="70" src="\assets\images\logo.png" />
  <span>FitnessWorkout</span>
    <div class="spacer"></div>
    <span nav-tool-items>
        <button menu-item color="accent" routerLink="/signup">Sign-up</button>
        <button menu-item color="primary" routerLink="/login">Login</button>
        <button menu-item color="warn" (click)="logout()">Log out</button>
      </span>
</div>

<!-- <mat-sidenav-container>
    <mat-sidenav #sidenav>
      <mat-nav-list>
        <a mat-list-item routerLinkActive="active" [routerLink]="'/workout-overview'"> My Workouts </a>
        <a mat-list-item routerLinkActive="active" [routerLink]="'/create-workout'"> Create Workout </a>
        <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <div style="height: 88vh;">
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>

  </mat-sidenav-container> -->



<div class="content" role="main">

  <!-- Highlight Card -->
  <img  width="180"  height="100"  src="\assets\images\logo.png"/>
  <p>Welcome to {{title}}</p>

  <!-- Workouts -->
  <h2>Workouts</h2>
  <div class="card-container">
    <a class="card" >
    <a mat-list-item routerLinkActive="active" [routerLink]="'/workout-overview'"> My Workouts </a> <br>
    <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
  </div>

  <!-- Next Steps -->
  <h2>Next Steps</h2>
  <p>What do you want to do next with your workout exercises?</p>

  <input type="hidden" #selection>

  <div class="card-container">
    <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
        <a mat-list-item routerLinkActive="active" [routerLink]="'/create-workout'"> New Workout </a>
    </div>
  </div>

</div>

在 app.module.ts 中，我有相关的导入，它们被放置在自定义模块 - AngularMaterialModule 中。

@NgModule({
  declarations: [
    AppComponent,
    CreateWorkoutComponent,
    EditWorkoutComponent,
    LoginComponent,
    SignupComponent,
    WorkoutOverviewComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, ReactiveFormsModule,
    AngularMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

编辑:添加了控制台输出。

Answer 1

您需要在您的应用程序中添加 BrowseAnimationsModule

// If it's not installed, then save it in your project from your bash
npm install --save @angular/animations

然后在您的代码(模块)中导入它。

// Import the module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
    ...
    imports:      [    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    AngularMaterialModule,
    // This one here
    BrowserAnimationsModule
    ]                           
    ...
})