无法绑定到'open'，因为它不是'md-sidenav'的已知属性

Question

我只是将我的角度材料项目更新为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＆gt;中添加了material.module.ts。 app文件夹

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

如果您正在使用MatSidenavModule，则需要使用their example here中所述的mat-sidenav-container。您还尝试导入指令而不是模块。您需要使用MatSidenavModule而不仅仅是MatSidenav。请务必在app.module的顶部导入它，并在@ngModule导入部分中声明它。

Answer 2

自2.0.0-beta.12起，md前缀已被删除。见CHANGELOG：

  

所有＆＃34; md＆＃34;前缀已被删除。请参阅中的deprecation notice   beta.11备注了解更多信息。

将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。