了解 Angular 功能模块中的路由

Question

我在 app-routing.module.ts

中定义了路由

[
   {path: 'xyz', loadChildren: './child/child.module#ChildModule'}
]

并在 child-routing.module.ts 中作为

[
    {path: '', component: ChildComponent},
    {path: ':id', component: ChildComponent}
]

当我访问路线 localhost:4200/xyz 时，它会加载预期的 ChildComponent。

但是当我转到 localhost:4200/ 时，它会加载 ChildComponent。这不是预期的，因为我认为它是 parent_route 即 xyz 加 child_route.

如何限制 angular 在 /

上加载 ChildComponent

StackBlitz 上发布的示例 https://stackblitz.com/edit/angular-xts7bc

Answer 1

您正在尝试 lazy-load ParentModule 和 ChildModule，但是您已经分别在 AppModule 和 ParentModule 中导入了它们。路由器与 Parent 和 AppModule 中定义的路由不匹配，但它们与 ChildModule 匹配，因此您甚至可以在根 ('/') 上获得该组件。

要解决此问题，请从 AppModule 的导入数组中删除 ParentModule 并从 ParentModule.

的导入中删除 ChildModule

了解 Angular 功能模块中的路由

Understanding Angular routing at feature module

angular-routing

angular