Angular 子路由无需父路由即可导航

Question

我在 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 {}

urlhttps://localhost:4200/store/dashboard和 https://localhost:4200/dashboardload child DashboardComponent。

第二个网址不应有效。为什么它有效？

Answer 1

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

StoreModule从进口声明中删除声明app.module.ts解决了问题。

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