Angular 子路由可以在没有父路由的情况下导航答案

【问题标题】：Angular Child Routes Navigable without Parent RouteAngular 子路由可以在没有父路由的情况下导航
【发布时间】：2025-11-29 16:00:02
【问题描述】：

我在 Angular 13 应用程序中有一些路由，它们加载包含许多子路由的其他模块。

我的路由是在各个模块中设置的：

@NgModule({
    declarations: [DashboardComponent],
    imports: [RouterModule.forChild(childRoutes)]})
export class ChildModule{}

export const childRoutes = [
    {path: 'dashboard', component: DashboardComponent},
    {path: 'reports', component: ReportsComponent}];

我的父模块懒加载子模块：

export const appRoutes = [
    {path: 'store', component: StoreLayoutComponent,
     loadChildren: () => import('app/store/child.module').then(m => m.ChildModule)}];

@NgModule({
    imports: [
    ...
    RouterModule.forRoot(appRoutes)
    ],
    ...})
export class AppModule {}

两个网址 https://localhost:4200/store/dashboard 和 https://localhost:4200/dashboard加载孩子DashboardComponent。

第二个网址不应该是有效的。为什么有效？

【问题讨论】：

标签： angular typescript routes

【解决方案1】：

尝试将子路由放在children 中。

儿童

@NgModule({
    declarations: [DashboardComponent],
    imports: [RouterModule.forChild(childRoutes)]})
export class ChildModule{}

export const childRoutes = [{
children:[
    {path: 'dashboard', component: DashboardComponent},
    {path: 'reports', component: ReportsComponent}]
}];

家长

export const appRoutes = [
    {path: 'store', component: StoreLayoutComponent,
     loadChildren: () => import('app/store/child.module').then(m => m.ChildModule)}];

@NgModule({
    imports: [
    ...
    RouterModule.forRoot(appRoutes)
    ],
    ...})

【讨论】：

谢谢，我对此进行了重构，但在 URL 中没有父路由的情况下，我仍然可以导航到子节点。它没有修复它。我试图创建一个显示问题的 Stackblitz，但它在 Stackblitz 中有效，但在我的应用程序中无效。我的应用程序中一定有更复杂的原因导致它。再次感谢。
非常感谢，这不是问题所在，但它帮助我清理了代码并最终让我找到了实际问题。
只是好奇。出了什么问题？
我将子模块作为延迟加载的路由，并包含在模块的“导入”部分中。这是将其注册为根路由的子路由，以及父路由的子路由。

【解决方案2】：

这里的问题是StoreModule 被延迟加载并出现在应用程序的app.module.ts 中。这为模块创建了路由，既作为app.module 的直接子级，也作为在正确地址的延迟加载模块。

从app.module.ts 的导入语句中删除StoreModule 的声明解决了这个问题。

希望这对将来的某人有所帮助。

【讨论】：