Angular8中共享模塊，共享組件的寫法（anular其他模塊組件引用方法）

Angular8中共享模塊，共享組件的寫法（anular其他模塊組件引用方法）

第一步：全局創建一個共享的module

這里示例創建一個模塊common-share
創建完成后，會生成兩個文件
文件1：common-share-routing.module.ts
文件2：common-share.module.ts

第二步：我們在模塊下創建一個需要共享的組件

這里示例創建一個組件common-form-share-new
創建完成后會，會生成三個文件或者兩個文件
文件1：common-form-share-new.component.html
文件2：common-form-share-new.component.less
文件3：common-form-share-new.component.ts

第三步：

打開模塊里這個文件common-share.module.ts
根據下面代碼進行操作：

import { NgModule } from '@angular/core';
import { SharedModule } from '@shared';
import { CommonShareRoutingModule } from './common-share-routing.module';
import { CommonFormShareNewComponent } from './common-form-share-new/common-form-share-new.component'; // 這里是共享的組件 

const COMPONENTS = [];
const COMPONENTS_NOROUNT = [];

@NgModule({
  imports: [
    SharedModule,
    CommonShareRoutingModule
  ],
  declarations: [
    ...COMPONENTS,
    ...COMPONENTS_NOROUNT,
    CommonFormShareNewComponent //這里引入共享的組件 
  ],
  exports:[CommonFormShareNewComponent], // 把共享的組件放入到導出的出口中 
  entryComponents: COMPONENTS_NOROUNT
})
export class CommonShareModule { }

第四步：

去到你想要引入組件的地方所在模塊，比如我的父組件在這個模塊 my-parent-module
進入my-parent-module.module.ts
根據下面代碼進行操作：

import { NgModule } from '@angular/core';
import { SharedModule } from '@shared';
import { myParentModuleRoutingModule } from './maintain-system-sur-routing.module';
import { XXXXComponent} from './nand-size-maintain/XXXX.component';
import { CommonShareModule } from '../common-share/common-share.module'; // 這句是需要添加的代碼
const COMPONENTS = [];
const COMPONENTS_NOROUNT = [];

@NgModule({
  imports: [
    SharedModule,
    myParentModuleRoutingModule,
    CommonShareModule // 共享模塊--這句是需要添加的代碼
  ],
  declarations: [
    ...COMPONENTS,
    ...COMPONENTS_NOROUNT,
    XXXXComponent
  ],
  entryComponents: COMPONENTS_NOROUNT
})
export class myParentModuleModule { }

第五步：在my-parent-module模塊下的所有組件都可以隨意引用這個共享組件啦~~

示例：
html代碼：

<div>
  <app-common-form-share-new></app-common-form-share-new>
</div>