对angular2与共享模块进行应用

这次给大家带来对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 {

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular路由实战案例应用

Angular使用HMR代码解析

Atas ialah kandungan terperinci 对angular2与共享模块进行应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!