鍍金池/ 問答/HTML5/ Angularjs2中根模塊導(dǎo)入特性模塊,如何將特性模塊的路由作為根模塊路由的子

Angularjs2中根模塊導(dǎo)入特性模塊,如何將特性模塊的路由作為根模塊路由的子路由導(dǎo)入?

最近在開發(fā)時(shí)遇到的問題,根模塊在導(dǎo)入子模塊時(shí),子模塊路由會(huì)擴(kuò)展根模塊路由。
但是根模塊路由和子模塊路由是平級(jí)關(guān)系。

以下是根模塊路由

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

根模塊導(dǎo)入特性模塊

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"
  }
]

這兩個(gè)路由列表合成之后,依然是平級(jí)關(guān)系,怎么能讓特性模塊作為根模塊的子路由呢?難道只能把所有路由都寫在一塊嗎?

回答
編輯回答
心夠野

使用懶加載,無需導(dǎo)入特性模塊,如下:
根路由:

const manage_routes: Routes = [
    { 
        path: 'manage',
        children: [
            { path: '',  redirectTo: 'dashboard_conf', pathMatch: 'full' },
            { path:' image',loadChildren:'../../image.module#ImageModule'}
        ]
    }
];
2018年5月12日 15:08