如何在Angular中的嵌套模块上进行路由？答案

【问题标题】：How to do routing on nested modules in Angular?如何在Angular中的嵌套模块上进行路由？
【发布时间】：2017-05-15 07:44:18
【问题描述】：

我有一个这样的模块层次结构：

app

-- module1
   - submodule1
   - submodule2

我想知道如何从子模块到模块，从模块到主应用模块。

到目前为止，我可以像这样从模块路由到主应用模块：

app.module.ts - 主模块

...imports

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    AppRoutingModule,

    //Feature Modules
    Module1,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.routing.ts

import { RouterModule } from '@angular/router';

export const AppRoutingModule = RouterModule.forRoot([
  { path: '', component: AppComponent },
  { path: 'module1', loadChildren: './feature/module1/module1.module#Module1' }
]);

module1.module.ts - 1 级模块

...imports

@NgModule({
  imports: [
    SubModule1,
    SubModule2,
    Module1RoutingModule
  ],
  declarations: [Module1Component],
})
export class Module1 { }

module1.routing.ts

import { RouterModule } from '@angular/router';
import {Module1Component} from "./module1.component";

export const Module1RoutingModule = RouterModule.forChild([
  { path: '', component: Module1Component },
  { path: 'submodule1', loadChildren: '.submodule1/submodule1.module#Submodule1Module' },
]);

这就是我不知道如何路由子模块路由的地方......

submodule1.module.ts - 2 级模块

...进口

@NgModule({
  imports: [
    Submodule1RoutingModule
  ],
  declarations: [Submodule1Component],
})
export class Submodule1Module { }

这里是我需要帮助确定如何路由的地方：

submodule1.rounting.ts

import { RouterModule } from '@angular/router';
import {Submodule1Component} from "./submodule1.component";

export const Submodule1RoutingModule = RouterModule.forChild([
  { path: '', component: Submodule1Component }
]);

【问题讨论】：

标签： angular angular-routing ng-modules

【解决方案1】：

您可以在您的路线中添加一个“孩子”来定义子路线。此处定义的子路由只会在子模块路由内可见。

{ path: 'submodule', component: Submodule1Module,
    children: [
      { path: 'sub-route1', component: SubRoute1 },
      { path: 'sub-route2', component: SubRoute2 }
    ]
}

【讨论】：