Question

plunker中的代码工作正常，但在我的计算机上无效。当我点击打开侧导航按钮时，我看到错误'.open不是函数'screenshot of the error

//app.component.html
<mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav class="example-sidenav">
      Jolly good!
    </mat-sidenav>

    <div class="example-sidenav-content">
      <button type="button" mat-button (click)="sidenav.open()">
        Open sidenav
      </button>
    </div>

  </mat-sidenav-container>
//app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  title = 'app';
}

//app.component.css
.example-container {
    width: 500px;
    height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.5);
  }

  .example-sidenav-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .example-sidenav {
    padding: 20px;
  }

Answer 1

您需要在MatSidenavModule的导入部分添加@NgModule。

我转载了你的错误。请看这个链接：https://plnkr.co/edit/HalfBwhQ0atvlhmCN3An?p=preview 在此MatSidenavModule中没有@NgModule。

请参阅：https://material.angular.io/components/sidenav/api

角度材料2 sidenav错误：.open不是函数

1 个答案: