您好,欢迎访问一九零五行业门户网

对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 {   }
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
angular路由实战案例应用
angular使用hmr代码解析
以上就是对angular2与共享模块进行应用的详细内容。
其它类似信息

推荐信息