angular - 无法绑定(bind)到 'opened'，因为它不是 'md-sidenav' 的已知属性

Question

我刚刚将我的 Angular Material 项目更新为 BETA.0.12

更新前一切正常，但更新后，我不知道我做错了什么

我有这个错误

compiler.es5.js:1694 Uncaught Error: Template parse errors:
Can't bind to 'opened' since it isn't a known property of 'md-sidenav'.
1. If 'md-sidenav' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'md-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  <md-sidenav-container>

    <md-sidenav mode="side" [ERROR ->]opened="{{sidenavState | async }}">

      <!-- MENU LEFT -->
"): ng:///AppModule/DashboardComponent.html@13:28
    at syntaxError (compiler.es5.js:1694)

这是我的 app.module.ts

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




// =============================================================================
//                                FIREBASE
// =============================================================================
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';



// =============================================================================
// ANGULAR MATERIAL 2
// =============================================================================
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import { MaterialModule } from '@angular/material';
import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatSidenav,
  MatGridList,
} from '@angular/material';

import { FlexLayoutModule } from '@angular/flex-layout';
import 'hammerjs';

这是我的 dashboard.component.html

<div class="main-container" fxLayout="column" fxFlex [class.dark-theme]="isDarkTheme" style="width:100vw;">

  <!-- ===================================================================== -->
  <!-- HEADER -->
  <!-- ===================================================================== -->
  <app-admin-header></app-admin-header>


  <!-- ===================================================================== -->
  <!-- SIDENAV && SIDENAV CONTAINER -->
  <!-- ===================================================================== -->
  <md-sidenav-container>

    <md-sidenav mode="side" opened="{{sidenavState | async }}">

      <!-- MENU LEFT -->
      <app-admin-nav-menu-left></app-admin-nav-menu-left>

    </md-sidenav>

然后我在 src > app 文件夹中添加 material.module.ts

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

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatSidenav
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatSidenav
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatSidenav
  ]
})
export class MaterialModule {}

没关系，但我有这个错误

compiler.es5.js:1694 Uncaught Error: Unexpected directive 'MatSidenav' imported by the module 'MaterialModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.es5.js:1694)
    at compiler.es5.js:15398
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15381)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary (compiler.es5.js:15323)
    at compiler.es5.js:15396
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15381)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26826)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26799)

Answer 1

自 2.0.0-beta.12 起，md 前缀已被移除。看这个CHANGELOG :

All "md" prefixes have been removed. See the deprecation notice in the beta.11 notes for more information.

将 md 前缀替换为 mat。您的模板需要:

<mat-sidenav-container>

    <mat-sidenav mode="side" opened="{{sidenavState | async }}">

      <!-- MENU LEFT -->
      <app-admin-nav-menu-left></app-admin-nav-menu-left>

    </mat-sidenav>

此外，在您的 material.module.ts 中，您需要导入 MatSidenavModule 而不是 MatSidenav。