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>

巴特西

Angular8中共享模块，共享组件的写法（anular其他模块组件引用方法）

Angular8中共享模块，共享组件的写法（anular其他模块组件引用方法）

第一步：全局创建一个共享的module

第二步：我们在模块下创建一个需要共享的组件

第三步：

第四步：

第五步：在my-parent-module模块下的所有组件都可以随意引用这个共享组件啦~~

最新文章

热门文章