无法绑定到“opened”，因为它不是“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 > 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前缀已被删除。请参阅此变更日志：

所有“md”前缀已被删除。有关更多信息，请参阅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.