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 { 
  
} 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。