Angular material toggle undefined 不命中

Question

我的应用程序上有一个 sidenav 工具栏，除非屏幕用于移动设备，否则该工具栏始终显示当屏幕是手机时，会显示一个图标按钮来打开 sidenav，但它不起作用，可能是我需要注入一个模块。但是我不知道是哪个。

那是我的组件。

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      *ngIf="(currentUser |  async)"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar color="primary" class="app-header">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="customers" *ngIf="(currentUser | async)">Clientes</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary" class="app-header">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(currentUser |  async) && (isHandset$ | async)">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Minha Agenda</span>
       <span class="nav-tool-items" *ngIf="!(currentUser | async); else logged">
         <div class="header-button-row">
            <a mat-raised-button routerLink="login" routerLinkActive="active">Log in</a>
            <a mat-button mat-raised-button color="accent" routerLink="register" routerLinkActive="active">Register</a>
         </div>
      </span>
      <ng-template #logged>
        <span class="nav-tool-items">
          <div class="header-button-row">
            <a mat-button mat-raised-button routerLink="home" color="primary" routerLinkActive="active">Home</a>
            <a mat-button mat-raised-button color="accent" (click)="logout()">Logout</a>
          </div>
        </span>
    </ng-template>
    </mat-toolbar>
    <div class="row" class="content">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

而且我有一个特定的模块来导入所有 angular material 模块。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {
   MatButtonModule,
   MatToolbarModule,
   MatIconModule,
   MatBadgeModule,
   MatSidenavModule,
   MatListModule,
   MatGridListModule,
   MatFormFieldModule,
   MatInputModule,
   MatSelectModule,
   MatRadioModule,
   MatDatepickerModule,
   MatNativeDateModule,
   MatChipsModule,
   MatTooltipModule,
   MatTableModule,
   MatPaginatorModule,
   MatDividerModule,
   MatProgressSpinnerModule,
   MatButtonToggleModule,
   MatAutocompleteModule,
   MatCardModule,
   MatCheckboxModule,
   MatStepperModule,
   MatDialogModule,
   MatExpansionModule,
   MatMenuModule,
   MatProgressBarModule,
   MatRippleModule,
   MatSliderModule,
   MatSlideToggleModule,
   MatSnackBarModule,
   MatSortModule,
   MatTabsModule,
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';

const material = [
  CommonModule,
  MatButtonModule,
  MatToolbarModule,
  MatIconModule,
  MatSidenavModule,
  MatBadgeModule,
  MatListModule,
  MatGridListModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  MatRadioModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatChipsModule,
  MatTooltipModule,
  MatTableModule,
  MatPaginatorModule,
  MatToolbarModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatTableModule,
  MatPaginatorModule,
  MatListModule,
  MatProgressSpinnerModule,
  MatButtonToggleModule,
  CdkTableModule,
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatStepperModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
]

@NgModule({
  declarations: [],
  imports: [
    material
  ],
  exports: [
    material
  ],
  providers: [
    MatDividerModule
  ]
})
export class AngularMaterialModule { }

还有我的组件ts文件：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './shared/services/auth.service';
import { User } from './shared/models/user';
import { Observable } from 'rxjs';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentUser: Observable<User>;

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(private authService: AuthService, private router: Router, private breakpointObserver: BreakpointObserver) {
    this.currentUser = this.authService.currentUser;
  }

  logout() {
    this.authService.logout();
    this.router.navigate(['/login']);
  }
}

我的package.json低于

{
  "name": "minhaagenda",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.0.1",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@auth0/angular-jwt": "^4.0.0",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "bootstrap": "^4.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.3",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

有人可以帮助我吗？

Answer 1

您需要从 angular material 个模块导入指定文件而不是通用 material。

示例：导入错误：import { MatButtonModule } from '@angular/material';

正确导入：import { MatButtonModule } from '@angular/material/button';

在您的模块中，您需要将以下模块导入到您的应用程序模块中

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';```

Answer 2

问题是关于 ngIf，根据对象结果，元素抽屉消失了

Angular material toggle undefined 不命中

Angular material toggle undefined does not hit

navigation-drawer

angular-material

angular

angular-material-7