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 });
  }

我尝试使用此代码段访问路由，但始终显示错误


  /**
   * 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 }
    );
  }

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：“ skills-missions-init / by-example”错误：无法匹配任何路线。 URL段：“ skills-missions-init / lead-by-example” 在ApplyRedirects.push ../ node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError中（router.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中（Subscriber.js：80）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error中（Subscriber.js：60）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error中（Subscriber.js：80）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error中（Subscriber.js：60）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error中（Subscriber.js：80）在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error中（Subscriber.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）在rainMicroTaskQueue（zone.js：595）在ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask中 [作为调用]（zone.js：500）在invokeTask（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'] } }
      ],
    );
  }

链接保持原状。

read more about here

错误：无法匹配任何路线。网址段：“？”

1 个答案: