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 { }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
react router v4使用详解
angular 5.x中router使用详解
以上就是angular2模块与共享模块使用方法的详细内容。