mat-sidenav sidenav.toggle()不工作

Question

我在垫子工具栏里有我的按钮。我们的期望是，我可以使用切换条隐藏并显示sidenav，但是这是不起作用的。sidenav将保持关闭状态，直到单击切换按钮。工具栏和sidenav容器位于同一个组件中。我在控制台中也没有任何错误。

nav.component.html

<mat-toolbar ngClass="transparent-nav">
    <div>
        <div class="nav-item-wrapper">
            <a mat-button [routerLink]="'/login'" ngClass="nav-item "> Login</a>
            <a mat-button [routerLink]="'/contact'" ngClass="nav-item nav-pill"> Select a plan </a>
        </div>
        <button mat-icon-button ngClass="btn-toggle-blue">
            <mat-icon (click)="sidenav.toggle()">
                menu
            </mat-icon>
        </button>
    </div>
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav #sidenav mode="side"> 
        <div class="nav-item-side-wrapper">
            <a [routerLink]="'/login'" ngClass="nav-item "> Login </a>
            <a [routerLink]="'/contact'" ngClass="nav-item nav-pill-blue"> Select a plan </a>
        </div>
    </mat-sidenav>
    <!-- main content on the page to the right -->
    <mat-sidenav-content>
        <div ngClass="content">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

nav.component.ts

 @ViewChild(MatSidenav) sidenav !: MatSidenav;

Answer 1

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule,
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component, VERSION } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'Angular ' + VERSION.major; 

  constructor() {}
}

app.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>
    <h1>SimpleCRM</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button> Accounts </a>
      <a mat-button> Create Account </a>
      <a mat-button> Contacts </a>
      <a mat-button> Create Contact </a>
      <a mat-button> Activities </a>
      <a mat-button> Create Activity </a>
    </div>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span style="font-size: 12px;"
      >SimpleCRM helps you easily manage your contacts</span
    >
  </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <a mat-list-item> Accounts </a>
      <a mat-list-item> Create Account </a>
      <a mat-list-item> Contacts </a>
      <a mat-list-item> Create Contact </a>
      <a mat-list-item> Activities </a>
      <a mat-list-item> Create Activity </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 here -->
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

工作示例在这里