Angular Material sidenav 出错：无法读取未定义的属性

Question

我正在开发一个 Angular 客户端应用程序，我已经在这个应用程序中使用了一些 Material 的功能，例如对话框、select、卡片等。我认为我已经安装了我需要的一切。现在我做了一个sidenav，想用material的sidenav模块，所以就这样做了：

<mat-container>
  <mat-content>
    <div (click)="sidenav.toggle()"></div>
    my component html . . .
  </mat-content>
  <mat-sidenav #sidenav>
    <app-sidenav></app-sidenav>
  </mat-sidenav>
</mat-container>

现在，当我导航到该组件时出现错误：

Uncaught (in promise):TypeError: Cannot read property 'runOutsideAngular' of undefined

如果没有该组件，该组件可以正常工作...有人知道可能是什么问题吗？谢谢！

Answer 1

我制作的 sidenav 是这样的，它工作正常，试试这个。

<mat-container>
  <mat-content>
    <div (click)="sidenav.toggle()">
  my component html . . .
 </div>
  </mat-content>
  </mat-container>
  <mat-sidenav-container>
    <mat-sidenav #sidenav>
  <app-sidenav></app-sidenav>
 </mat-sidenav>
</mat-sidenav-container>

Answer 2

我做了几乎相同的代码，但更改如下：

<mat-container> => <mat-drawer-container>
<mat-content> => <mat-drawer-content>
<mat-sidenav #sidenav> => <mat-drawer #drawer>

Answer 3

我在 Angular Material's Navigation Schematic 运行 ng test 时遇到了同样的错误：

ng generate @angular/material:material-nav --name <component-name>

我通过将 mat-navbar-test.component.html 中的 mat-sidenav 更改为 mat-drawer 解决了这个问题。

Answer 4

之前

<mat-sidenav-container *ngIf="currentAdmin && currentAdmin.role" id="nav" >

我遇到了这个问题，通过删除父级上的 *ngIf 解决了这个问题，'mat-sidenav-container'

<mat-sidenav-container id="nav" >

Angular Material sidenav 出错：无法读取未定义的属性

Error with Angular Material sidenav: cannot read property of undefined

angular-material2

angular

Angular Material sidenav 出错：无法读取未定义的 属性

Error with Angular Material sidenav: cannot read property of undefined

angular-material2

angular

Angular Material sidenav 出错：无法读取未定义的属性