亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

關于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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消