好资源导航 » 文章资讯 » angular2模块和共享模块详解

angular2模块和共享模块详解

2023-09-14 11:01:04 56

创建模块，用到了共享模块PostSharedModule，共享模块里面包含了2个公用的模块：文章管理模块和评论管理模块

1,创建一个模块testmodule.module.ts

import{CommonModule}from'@angular/common';
import{NgModule}from'@angular/core';
import{RouterModule}from"@angular/router";
import{PostSharedModule}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,
PostSharedModule,
RouterModule.forChild(testModule)
],
exports:[
TestMainComponent
],
providers:[
PostTableService
]
})
exportclassTestModule{}

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';
exportconsttestModule=[
{
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.执行nggctest-main，创建组件test-main，修改test-main.component.html

10000文章管理
1000000评论管理

创建共享模块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
]
})
exportclassPostSharedModule{

}

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

返回顶部
514930285
czq8825@qq.com

angular2模块和共享模块详解

热门推荐

随机推荐