Question

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

app

-- module1
   - submodule1
   - submodule2

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

到目前为止，我可以从模块路由到主app模块，如下所示：

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

您可以添加一个孩子＆＃39;在您的路线中定义子路线。此处定义的子路径仅在子模块路径中可见。

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

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

1 个答案: