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>