错误：无法匹配任何路由。 URL 段：“？”

Question

我正在尝试访问子路由的子路由，正如您在 Skills-missions-init-routing.module.ts 文件中看到的那样，第一个路由有效但第二个无法访问，每个当我尝试访问出现此错误的路线时。

我想知道在不执行此错误的情况下访问第二条路由的方法是什么

skills-missions-init-routing.module.ts

const routesSkills: Routes = [
  {
    path: 'skills-missions-init',
    children: [
      {
        path: ':id', component: SkillsMissionsInitComponent,
        children: [
          {
            path: ':view', component: ViewMissionComponent, outlet: 'list',
            children: [
              // This is the route I'm trying to access
              { path: 'get-ready-for-mission', component: GetReadyForMissionComponent, outlet: 'list' }, 
            ]
          }
        ]
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routesSkills)],
  exports: [RouterModule]
})
export class SkillsMissionsInitRoutingModule { }

模型保持不变

@NgModule({
  declarations: [
    ViewMissionComponent,
    GetReadyForMissionComponent
  ],
  imports: [
    CommonModule,
    SkillsMissionsInitRoutingModule
  ],
  exports: [
    SkillsMissionsInitRoutingModule,
    GetReadyForMissionComponent
  ],
  bootstrap: [SkillsMissionsInitComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SkillsMissionsInitModule { }

这条路线按要求运行

路线看起来是这样的。

http://10.0.3.18:4200/#/skills-missions-init/lead-by-example/(list:11)

  /**
   * redirectViewMission
   */
  public redirectViewMission(id: number, key: string) {
    return this.router.navigate(['/skills-missions-init', key, { outlets: { list: [id] } }], { relativeTo: this.routeActivated });
  }

我尝试用这段代码sn-p访问路由，但总是显示错误

  /**
   * getReadyForMission
   */
  public getReadyForMission() {
    console.log(this.competency, this.behavior);
    return this.router.navigate(
      [
        'skills-missions-init',
        this.competency,
        { outlets: { list: [this.behavior, 'get-ready-for-mission'] } }
      ],
      { relativeTo: this.routeActivated }
    );
  }

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：'skills-missions-init/lead-by-example' 错误：不能 匹配任何路线。 URL 段：'skills-missions-init/lead-by-example' 在 ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (路由器.js:2434) 在 CatchSubscriber.selector (router.js:2415) 在 CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (订阅者.js:80) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (订阅者.js:60) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (订阅者.js:80) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (订阅者.js:60) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (订阅者.js:80) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (订阅者.js:60) 在 TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61) 在 resolvePromise (zone.js:814) 在 resolvePromise (zone.js:771) 在 zone.js:873 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:14051) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) 在 drainMicroTaskQueue (zone.js:595) 在 ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [作为调用] (zone.js:500) 在调用任务（zone.js:1540）

    ApplyRedirects.prototype.noMatchError = function (e) {
        return new Error("Cannot match any routes. URL Segment: '" + e.segmentGroup + "'");
    };

好吧，我试着留下最详细的，如果有人有任何问题可以帮助我，我会等待。

Answer 1

快速解决这个问题，但不是我想要的，我就是这样用的

const routesSkills: Routes = [
  {
    path: 'skills-missions-init',
    children: [
      {
        path: ':id', component: SkillsMissionsInitComponent,
        children: [
          { path: ':view', component: ViewMissionComponent, outlet: 'list' },
          { path: ':view/get-ready-for-mission', component: GetReadyForMissionComponent, outlet: 'list' },
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routesSkills)],
  exports: [RouterModule]
})
export class SkillsMissionsInitRoutingModule { }

  /**
   * getReadyForMission
   */
  public getReadyForMission() {
    return this.router.navigate(
      [
        'skills-missions-init',
        this.competency,
        { outlets: { list: [this.behavior, 'get-ready-for-mission'] } }
      ],
    );
  }

链接保持不变。

http://10.0.3.18:4200/#/skills-missions-init/be-digital/(list:14/get-ready-for-mission)