将材料模块导入特征模块

Question

我正在尝试在Angular应用中使用材料设计。我将 BrowserAnimationsModule和 MdSidenavModule导入到懒负载功能模块中。

我在控制台上有一个错误：

BrowserModule已经加载。如果您需要访问常见 从懒惰的模块中，诸如NGIF和NGFOR之类的指令，导入 相反。

这是我的功能模块：

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { ProtectedRoutingModule } from './protected-routing.module';
import { ProtectedComponent } from './protected.component';
import { TinymceComponent } from '../features/tinymce/tinymce.component';
// animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// material designs components
import { MdSidenavModule } from '@angular/material';
@NgModule({
  imports: [
    SharedModule,
    ProtectedRoutingModule,
    BrowserAnimationsModule,
    MdSidenavModule
  ],
  declarations: [
    ProtectedComponent,
    TinymceComponent
  ],
  exports: [
    SharedModule
  ],
  providers: []
})
export class ProtectedModule { }

我的代码怎么了？谁能向我解释？

编辑

但是，当我将MdSidenavModule导入AppModule并在app.component.html中添加以下代码：

<md-sidenav-container class="container">
  <md-sidenav mode="side" opened="true" #sidenav class="sidenav">
    <nav>
      <ul>
        <li><a routerLink = "/" routerLinkActive = "active">Home</a></li>
        <li><a routerLink = "/dashboard" routerLinkActive = "active">Dashboard</a></li>
      </ul>
    </nav>
  </md-sidenav>
  <router-outlet></router-outlet>
</md-sidenav-container>

它可以正常工作！

编辑

我发现mdSideNav在根模块中起作用，只能在子模块中起作用。

Mdsidenav已分为Mdsidenav和MdDrawer。现在，Mdsidenav旨在用于顶级应用程序导航，而抽屉旨在用于更多本地拆分视图。虽然在此版本中两者之间没有差异，但未来版本将看到每个

添加不同的功能

https://changelogs.md/github/angular/material2/

Answer 1

您需要做的是首先实现CustomMaterialModule，可能看起来像：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatSidenavModule,
  MATERIAL_COMPATIBILITY_MODE,
  MatIconRegistry
} from '@angular/material';
@NgModule({
  imports: [
    CommonModule,
    MatSidenavModule,
  ],
  exports: [
    CommonModule,
    MatSidenavModule
  ]
})
export class CustomMaterialModule {
  static forRoot() {
    return {
      ngModule: CustomMaterialModule,
      providers: [
        MatIconRegistry,
        { provide: MATERIAL_COMPATIBILITY_MODE, useValue: true },
      ]
    };
  }
}

然后将其导入您的app.module，例如CustomMaterialModule.forRoot()，在您的功能模块中导入，例如CustomMaterialModule

在最新材料2.0.0-beta.11 md-前缀被弃用支持mat-，因此我建议迁移到此。

对于Beta.11，我们决定贬低" MD"前缀 完全使用"垫子"前进。这会影响所有班级名称， 属性，输入，输出和选择器（更改了CSS类 回到2月）。" MD"前缀将在下一个Beta中删除 释放。

谈论BrowserAnimationsModule您最好创建一个core.module，然后将其粘贴在https://angular.io/guide/styleguide#style-04-11

Answer 2

我解决了它，问题是在Angular版本4.3.6中，在更新到Angular 4.4.4之后，一切都按预期工作...