在没有孩子的Angular中路由嵌套模块？答案

【问题标题】：Routing on nested modules in Angular without children?在没有孩子的Angular中路由嵌套模块？
【发布时间】：2018-03-14 19:15:54
【问题描述】：

我有 3 个模块：

AppModule 那是我的根模块，
ModuleAModule,
ModuleBModule。

每个模块都有自己的routing.module.ts。我想建立像ROOT/module-a/module-b这样的路线

我准备了 2 个版本（有和没有 children 属性）：

这些文件在两个版本中存在差异：

app/modules/module-a/module-a.routing.module.ts
app/modules/module-b/module-b.routing.module.ts

问题：我想独立存储路径：不使用children[] 属性。如果可能的话。
我不在AppRoutingModule 中使用children[] 来代替ModuleARoutingModule。但是为什么我不能在ModuleARoutingModule 和ModuleBRoutingModule 之间做同样的事情呢？

不工作的 sn-ps

app.routing.ts

const routes: Routes = [
    { path: '', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forRoot(routes),
        ModuleARoutingModule,
    ],
    exports: [ RouterModule ]
})

module-a.routing.ts

const routes: Routes = [
    { path: 'module-a', component: ModuleAComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes),
        ModuleBRoutingModule,
    ],
    exports: [RouterModule]
})

module-b.routing.ts

const routes: Routes = [
    { path: 'module-b', component: ModuleBComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})

但我明白了

错误：未捕获（承诺中）：错误：无法匹配任何路由。网址段：'module-a/module-b' 错误：无法匹配任何路由。网址段：'module-a/module-b'

工作 sn-ps

解决这个问题：

我在module-a.routing.ts 中添加了children[] 属性并删除了 ModuleBRoutingModule 来自进口。

module-a.routing.ts

const routes: Routes = [
    {
        path: 'module-a',
        component: ModuleAComponent,
        children: [
            // via loadChildren or component
            { path: 'module-b', loadChildren: '../module-b/module-b.module#ModuleBModule' },
        ]
    },
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes),
        // ModuleBRoutingModule,
    ],
    exports: [RouterModule]
})

我还重写了module-b.routing.ts（将path=''设为空）。

module-b.routing.ts

const routes: Routes = [
    { path: '', component: ModuleBComponent }
];

问题

我可以在没有children[] 属性的情况下解决这个问题，还是我总是需要使用children？

【问题讨论】：

我认为这不是正确的解决方案。因为您在主路由中包含不正确的 2 个子路由。这将起作用。但理想情况下不是一个好的解决方案。这里我们想要的是，不用路由，能做到吗？我在想一种方式，我们可以在每个嵌套模块中分别添加引导 ModuleAComponent 和 ModuleBComponent 吗？

标签： angular routing angular2-routing angular-module

【解决方案1】：

欢迎使用 stackoverflow！

如果您有多个级别的路由器插座，您只需要children 属性。

你试过了吗：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ModuleARoutingModule } from './modules/module-a/module-a.routing.module';
import { ModuleBRoutingModule } from './modules/module-b/module-b.routing.module';

const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full', }
];

@NgModule({
  imports: [
    ModuleARoutingModule,
    ModuleBRoutingModule,
    RouterModule.forRoot(routes),
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

更新：

我花了一些时间处理你的 stackblitz 代码，你确实需要使用children，因为你确实有嵌套的路由器插座。如果移除嵌套的路由器插座，则无需使用children。

我有你的非工作代码的更新和工作版本，这里没有children：https://stackblitz.com/edit/embedded-routes-without-children-kd1hms

【讨论】：