angular - 每个 url 段都需要一个路由模块吗？

Question

Angular 新手，在理解我需要多少个路由模块时遇到问题。我正在构建一个多级侧面导航。现在我除了 app.module 之外只有 1 个模块。这是这个延迟加载的 MyConfiguration 模块的路由信息​​:

const routes: Routes = [
  {
    path: '',
    component: MyConfigurationComponent,
    children: [
      {
        path: 'a',
        component: AComponent
      },
      {
        path: 'b',
        component: BComponent
      },
      {
        path: 'c',
        component: CComponent,
        children: [
          {
            path: '1',
            component: OneComponent
          },
          {
            path: '2',
            component: TwoComponent
          }
        ]
      }
    ]
  }

如果我希望在选择 OneComponent 时将 url 更新为 my-configuration/c/1 ，这是否意味着我需要一个新的模块 + 路由模块？
我从 app-routing.module 懒加载它:

const routes: Routes = [
  { path: 'home', component: homeComponent },
  {
    path: 'my-configuration',
    loadChildren: () =>
      import('./my-configuration.module').then(
        p => p.MyConfigurationModule
      )
  },
];

当我选择 OneComponent 时，我希望我的 url 更新:

'my-configuration/c/1'

但是，它错误:

Error: Cannot match any routes. URL Segment: 'my-configuration/1'

因为激活的路由是我的配置。
这是单击链接的处理程序:

this.router
  .navigate([this.optionSelected.code], { relativeTo: this.route })
  .then(e => {
    if (e) {
      console.log('Navigation is successful!');
    } else {
      console.log('Navigation has failed!');
    }
  });

这是否意味着我需要一个新的模块+路由模块？像这样的东西:

const routes: Routes = [
  {
    path: 'my-configuration',
    loadChildren: () =>
      import('./my-configuration/my-configuration.module').then(
        p => p.MyConfigurationModule
      )
  },
];

Answer 1

试试这个:-

备注 :只有在访问“c”的子路由时，才需要有条件地附加“../”。

this.router
  .navigate(['../' + this.optionSelected.code], { relativeTo: this.route })
  .then(e => {
    if (e) {
      console.log('Navigation is successful!');
    } else {
      console.log('Navigation has failed!');
    }
  });