这次给大家带来如何使用angular2模块与共享模块，使用angular2模块与共享模块的注意事项有哪些，下面就是实战案例，一起来看一下。
创建模块，用到了共享模块postsharedmodule，共享模块里面包含了2个公用的模块：文章管理模块和评论管理模块
1,创建一个模块testmodule.module.ts
import { commonmodule } from '@angular/common';
import { ngmodule } from '@angular/core';
import { routermodule } from @angular/router;
import { <span style="color:#cc0000;"><strong>postsharedmodule </strong></span>} from '../shared/post.module';
import { testmodule } from './testmodule.routes';
import { testmaincomponent } from './test-main/test-main.component';
import { posttableservice } from '../manage/post-table/services/post-table.service';
@ngmodule({
declarations: [
testmaincomponent
],
imports: [
commonmodule,
<span style="color:#ff0000;">postsharedmodule</span>,
routermodule.forchild(testmodule)
],
exports:[
testmaincomponent
],
providers: [
posttableservice
]
})
export class testmodule { }
2.创建模块路由testmodule.routes.ts
import { testmaincomponent } from './test-main/test-main.component';
import { posttablecomponent } from '../manage/post-table/post-table.component';
import { commenttablecomponent } from '../manage/comment-table/comment-table.component';
export const testmodule = [
{
path:'',
component:testmaincomponent,
children: [
{ path: '',redirectto:'posttable/page/1',pathmatch:'full'},
{ path: 'posttable/page/:page', component: posttablecomponent },
{ path: 'commenttable/page/:page', component: commenttablecomponent },
{ path: '**', redirectto:'posttable/page/1' }
]
}
];
3.执行ng g c test-main，创建组件test-main，修改test-main.component.html
<a routerlink="posttable/page/1" class="list-group-item"><span class="badge">10000</span>文章管理</a>
<a routerlink="commenttable/page/1" class="list-group-item"><span class="badge">1000000</span>评论管理</a>
创建 共享模块post.module.ts
import { ngmodule } from '@angular/core';
import { modalmodule } from 'ng2-bootstrap';
import { paginationmodule } from 'ng2-bootstrap';
import { sharedmodule } from './shared.module';
import { commenttablecomponent } from '../manage/comment-table/comment-table.component';
import { posttablecomponent } from '../manage/post-table/post-table.component';
@ngmodule({
imports:[
sharedmodule,
modalmodule.forroot(),
paginationmodule.forroot()
],
declarations:[
commenttablecomponent,
posttablecomponent
],
exports:[
modalmodule,
paginationmodule,
commenttablecomponent,
posttablecomponent
]
})
export class postsharedmodule {
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用vue2.0资源文件assets和static
从零开始使用react router v4
以上就是如何使用angular2模块与共享模块的详细内容。