为了账号安全,请及时绑定邮箱和手机立即绑定

关于angular2中创建公共组件问题

在利用angular2进行项目的时候有时候我们会有一些类似的地方,(如一些页面的头)在页面书写的时候我们可以将这一部分独立出来形成一个组件。
1 当我们的项目比较小的时候,只有一个模块(AppModule)时我们只需要将这个组件写好后在AppModule中声明一下(declarations 中)即可,然后在需要用的地方直接引用这个组件的标签即可(即组件定义时所设置的 selector )

但有些时候我们的项目过大的时候会进行分模块以便项目进行管理,然后将这些模块引入APPModule中,但这时候我们就会发现如何引用公共模块,如若在这些模块中直接因组件(包含组件会包多个模块下都存在这个组件,需要将组件移到更高一级的目录等问题)

经过我们团队的探索 ,可以在分模块的情况下可以将公共组件引出来(独立在模块中),在其他模块用到的时候导入即可。

例如我们创建一个项目,将公共的组件我们可以独立在一个common模块下,然后在模块中将该模块引入 例如我设置一个commonModule模块,同时在模块中引入我的header组件,
@NgModule({ declarations: [ HeaderPage ], imports: [ CommonModule, IonicModule.forRoot(HeaderPage), FormsModule ], exports: [ HeaderPage ] }) export class HeaderModule { }
这里需要注意一点:在其他模块我们这个headerpage是要用到的,因此这里我们除了声明这个组件在该模块中以外,我们还需要将这个组件导出从该模块中利用 exports,若不导出,其他模块将无法使用这个公共的组件。

设置好这些之后就是我们公共组件的使用了: 在我们用到这些组件的地方我们需要先在该模块中将该组件所在的模块导入 例如我在home模块下需要用到这个组件
@NgModule({ declarations: [ HomePage ], imports: [ CommonModule, IonicModule.forRoot(HomePage), HeaderModule ], entryComponents: [ HomePage ] }) export class HomeModule { }
在home模块的imports中将Common模块导入,然后在home模块下用到这个组件的地方页面上直接写入标签即可(关于在模块中某些需要从父模块引入数据问题可参考@input)

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
10
获赞与收藏
66

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消