关于angular：将MaterialModule导入特征模块

Import MaterialModule into Feature Module

我正在尝试在我的angular应用程序中使用材质设计。我将BrowserAnimationsModule和MdSidenavModule导入了延迟加载功能模块。

我的控制台出现错误：

BrowserModule has already been loaded. If you need access to common
directives such as NgIf and NgFor from a lazy loaded module, import
CommonModule instead.

这是我的功能模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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 { }

What's wrong with my code? can anyone explain to me?

编辑

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<md-sidenav-container class="container">
<md-sidenav mode="side" opened="true" #sidenav class="sidenav">
<nav>

<ul>

<li>
Home
</li>

<li>
Dashboard
</li>

</ul>

</nav>
</md-sidenav>

<router-outlet></router-outlet>
</md-sidenav-container>

效果很好！

编辑

我发现mdSideNav仅在根模块中起作用，而在子模块中不起作用。

MdSidenav has been split into MdSidenav and MdDrawer. The MdSidenav is now meant to be used for top-level application navigation, while the drawer is meant to be used for more local split views. While there are no differences introduced between the two in this release, future releases will see different features added to each

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