如何在Angular 4的所有组件（含懒加载）中使用Shared Module

嘿，这事儿其实很简单，咱们一步步来搞定共享模块的设置，这样你的头部导航就能在所有组件里轻松复用啦！

首先咱们新建一个专门的共享模块，这是Angular里复用组件、第三方模块的标准姿势。创建shared.module.ts文件，内容如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入你用到的Material组件模块
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
// 导入咱们要共享的头部组件
import { AppHeaderComponent } from './app-header/app-header.component';

@NgModule({
  declarations: [
    AppHeaderComponent // 声明这个共享组件
  ],
  imports: [
    CommonModule,
    MatToolbarModule,
    MatButtonModule
  ],
  exports: [
    // 把需要复用的模块和组件导出，让其他模块能调用
    CommonModule,
    MatToolbarModule,
    MatButtonModule,
    AppHeaderComponent
  ]
})
export class SharedModule { }

把你现有的toolbar代码改成一个独立的组件，比如app-header.component.ts：

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

@Component({
  selector: 'app-header',
  template: `
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <span>My application</span>
        <span class="example-spacer"></span>
        <button mat-button>Logout</button>
      </mat-toolbar-row>
    </mat-toolbar>
  `,
  styles: [`
    .example-spacer {
      flex: 1 1 auto;
    }
  `]
})
export class AppHeaderComponent { }

不管是Login、Dashboard，还是懒加载的Profile、Employee模块，只要导入这个Shared Module，就能直接用头部组件和Material组件了：

比如Login模块（login.module.ts）：

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { LoginComponent } from './login.component';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    SharedModule // 导入共享模块，搞定！
  ]
})
export class LoginModule { }

懒加载的Profile模块（profile.module.ts）同理：

import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module';
import { ProfileComponent } from './profile.component';

@NgModule({
  declarations: [ProfileComponent],
  imports: [
    SharedModule
  ]
})
export class ProfileModule { }

现在你只需要在任意组件的模板里加一行代码，就能显示头部了：

<app-header></app-header>

<!-- 下面放组件自己的内容，比如登录表单、仪表板内容 -->

• Shared Module只放需要复用的组件、指令、管道，以及依赖的第三方模块（比如Material的这些模块）
• 如果你的Logout按钮需要调用Auth服务，别直接在Shared Module里提供服务，要用forRoot()方法确保服务是单例的（这个如果需要的话咱们再细说）
• 懒加载模块必须单独导入Shared Module，因为它们是独立的模块，不会继承父模块的导入配置

内容的提问来源于stack exchange，提问作者Sachin Shah