Angualr 模块共享

新建一个共享模块：如shareModule, 并在该模块下新建HelloComponent组件

再建两个模块： module1, module2来共享shareModule中的HelloComponent组件

 

第一步： 在shareModule 的shareModule.ts 文件中找到 exports: [], 并导入HelloComponent组件exports: [HelloComponent],

　　　　如果没有exports，手动加上就行了。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {HelloComponent} from '../hello/hello.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [HelloComponent], //HelloComponent 必须成为shareModule的一个组件

  exports: [HelloComponent]
})
export class ShareModule { }

第二步： 分别在module1和module2的module1.ts,module2.ts文件下的引入ShareModulimport { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
　　ShareModule
  ],
  declarations: [],
  exports: []
})
export class Module1Module { }
import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
　　ShareModule
  ],
  declarations: [],
  exports: []
})
export class Module2Module { }


最后： 直接在html中插入hello组件即可，不需要在declarations 增加HelloComponent

　　　　如： module1的页面

　　　　　　<app-hello></app-hello>