最近在开发时遇到的问题,根模块在导入子模块时,子模块路由会扩展根模块路由。
但是根模块路由和子模块路由是平级关系。
以下是根模块路由
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './common/auth/auth.service';
// 根路由器
const manage_routes: Routes = [
{
path: 'manage',
children: [
{ path: '', redirectTo: 'dashboard_conf', pathMatch: 'full' },
...
]
}
];
@NgModule({
imports: [ RouterModule.forChild(manage_routes) ],
exports: [ RouterModule ]
})
export class ManageRoutingModule {}
以下是特性模块路由
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ImageUploadComponent } from './upload_image.component';
import { ImageConfComponent } from './image.component';
import { ImageSeriesConfComponent, ImageSeriesConfDetailComponent, ImageSeriesSetComponent } from './image_series.component';
import { ImageTagConfComponent, ImageTagConfDetailComponent, ImageTagSetComponent } from './image_tag.component';
import { ImageSeriesCategoryConfComponent, ImageSeriesCategoryConfDetailComponent, ImageSeriesCategoryConfSetDetailComponent} from './image_series_category.component';
import { ImageRecommendTagConfComponent, ImageRecommendTagConfDetailComponent } from './image_recommend_tag.component';
// 图片模块路由器
const image_routes: Routes = [
{ path: 'manage/image_upload', component: ImageUploadComponent },
{ path: 'manage/image_conf', component: ImageConfComponent },
{
path: 'manage/image_series_conf',
children: [
{ path: '', component: ImageSeriesConfComponent },
{ path: 'detail/:id', component: ImageSeriesConfDetailComponent },
{ path: 'detail/add', component: ImageSeriesConfDetailComponent },
{ path: 'set/:id', component: ImageSeriesSetComponent },
]
},
...
];
@NgModule({
imports: [ RouterModule.forChild(image_routes) ],
exports: [ RouterModule ]
})
export class ImageRoutingModule {}
根模块导入特性模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
...
import { ImageModule } from './image/image.module';
@NgModule({
declarations: [
DashboardConfComponent,
],
imports: [
...
ImageModule, // 图片模块
ManageRoutingModule, // 放在最后
],
providers: [
...
]
})
export class ManageModule {
}
最后得到的路由列表
Routes: [
{
"path": "manage/image_series_conf",
"children": [
{
"path": ""
},
{
"path": "detail/:id"
},
{
"path": "detail/add"
},
{
"path": "set/:id"
}
]
},
{
"path": "",
"redirectTo": "manage",
"pathMatch": "full"
}
]
这两个路由列表合成之后,依然是平级关系,怎么能让特性模块作为根模块的子路由呢?难道只能把所有路由都写在一块吗?
在AngularJS2中,我们可以通过import语句来导入一个模块。如果你想将一个模块的路由作为根模块路由的子路由导入,你可以这样做:
```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component';
const routes: Routes = [ { path: 'home', component: HomeComponent } ];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ```
在这个例子中,我们首先导入了RouterModule
和Routes
。然后,我们定义了一个数组routes
,这个数组包含了我们要导入的路由。最后,我们使用import
语句来导入这个数组中的所有路由。
注意,这里我们使用了path
属性来指定路由的名称。在AngularJS2中,路由的名称是路径中的路径名,而不是URL中的路径名。
此外,如果你想将一个模块的路由作为其他模块的子路由导入,你可以在导入该模块时使用RouterModule.forChild
方法。例如:
```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component';
const routes: Routes = [ { path: 'home', component: HomeComponent } ];
@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ```
在这个例子中,我们没有导入任何模块,而是直接使用RouterModule.forChild
方法来导入routes
数组中的所有路由。