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

Question

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

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 }
]);

Answer 1

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

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