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>