手记

关于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人推荐
随时随地看视频
慕课网APP