以编程方式进行角度导航(router.navigate).错误:无法匹配任何路线 [英] angular navigate programmatically (router.navigate). Error: Cannot match any routes

问题描述

在组件内部尝试以编程方式导航到另一个路由路径，但出现错误(错误:未捕获(承诺):错误:无法匹配任何路由.URL段:).

Trying inside component programmatically navigate to another route path, but have error (ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:).

具有应用的下一个结构:

Have next structure of app:

app.module.ts
main.module.ts
     milestone.ts

const mainRoutes: Routes = [
  {
    path: '',
    component: MainComponent,
    canActivate: [LoggedInGuard],
    children: [{
      path: '',
      component: ContentComponent
    },
      {
        path: 'milestone/:milestoneId',
        loadChildren: './content/milestone/milestone.module#MilestoneModule',
        canActivate: [MilestoneGuard]
      }],
  }
];

imports 部分中 main.module.ts 中的

:

@NgModule({
  imports: [
    ...............
    RouterModule.forChild(mainRoutes)
  ],

和里程碑路线:

const milestoneRoutes: Routes = [
  {
    path: '',
    component: MilestoneComponent,
    canActivate: [LoggedInGuard],
    children: [{
      path: '',
      redirectTo: 'qa/documents',
      pathMatch: 'full'
    },
      {
        path: 'qa/documents',
        component: qaDocumentsComponent
      },
      {
        path: 'home/documents',
        component: homeDocumentsComponent
      }
    ]
  }
];

milestone.module.ts

milestone.module.ts

    @NgModule({
      ..........
      RouterModule.forChild(milestoneRoutes)
      ],

milestone.component.html:

milestone.component.html:

<div class="row content-wrap">
  <sidebar></sidebar>
  <main class="main-content">
    <router-outlet></router-outlet>
  </main>
</div>

通过模板进行的导航运行良好(我们打开了/qa/documents )，但是当尝试以编程方式导航时，我们会出错.

Navigation from template working well (we switches on /qa/documents ), but when trying to navigate programmatically there we have error.

仅用于尝试在Miletone.component.ts的ngOnInit()挂钩方法中进行导航的测试:

Just for testing trying to navigate in ngOnInit() hook method of milestone.component.ts:

export class MilestoneComponent implements OnInit {

  constructor( private router: Router) {}

  ngOnInit() {
    this.router.navigate(['/home/documents']);
  }

出现错误: core.es5.js:1020错误错误:未捕获(承诺):错误:无法匹配任何路由.网址段:首页/文档"

可能是什么问题?

推荐答案

您应该尝试在数组中使用单独的参数进行导航:

You should try to navigate with separate parameters in an array maybe:

this.router.navigate(['home', 'documents']);

这篇关于以编程方式进行角度导航(router.navigate).错误:无法匹配任何路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！