Question

在创建带有子路线的模块并尝试在它们之间导航时，我会遇到此错误。

app-routing.module.ts

const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: '/login' },
   { path: 'login', component: LoginComponent },
   { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', 
     canActivate: [AuthGuard] },

app / admin / admin-routing.module.ts

 const routes: Routes = [
  {
    path: "",
    redirectTo: "welcome",
    pathMatch: "full"
  },
  {
    path: "",
    component: AdminComponent,
    children: [
  {
    path: "welcome",
    component: WelcomeComponent
  },
  {
    path: "challenge/leaders",
    component: ChallengeLeadersComponent
  },
  {
    path: "challenge/collaborators/:id",
    component: ChallengeCollaboratorsComponent
  },
 ]}
];

app / admin / components / challenge / challenge-leaders.html

  <a [routerLink]="['challenge/collaborators', user.id]">

我得到的错误是

错误：无法匹配任何路由。网址段：“ admin / challenge / leaders / challenge / collaborators / ab5738”

Answer 1

这是因为您为/ admin指定了两个空路由，即redirectTo 其他用于AdminComponent。相反，您的第一个空路线应在子级数组中，并且您未指定任何挑战路线。挑战/领导者应该在挑战的孩子中。

const routes: Routes = [
  {
    path: "",   // This is /admin
    component: AdminComponent,
    children: [
  {
    path: "welcome",  // This is /admin/welcome
    component: WelcomeComponent
  },
  {
    path: "challenge",  // This is /admin/challenge
    component: ChallengeComponent,
    children: [
     { path: 'leader', component: ChallengeLeaderComponent }, // This is /admin/challenge/leader
     { path: 'collaborators', component: ChallengeCollaboratorsComponent }, // This one is /admin/challenge/collaborators
     { path: 'collaborators/:id', component: ChallengeCollaboratorComponent }, // This one is /admin/challenge/collaborators/someId
     { path: '', redirectTo: 'leader', pathMatch: 'full' }
   ]
  },
  {
    path: "",
    redirectTo: "welcome",
    pathMatch: "full"
  }
 ]}
];

Answer 2

您好，您的路由器链接确实有问题。您的错误显示为 “错误：无法匹配任何路线。URL段：'admin / challenge / leaders / challenge / collaborators / ab5738'”

路径应为“ admin / challenge / collaborators / ab5738”，而不是“ admin / challenge / leaders / challenge / collaborators / ab5738

您可以将路由器链接设置为绝对或相对路径；您可以检查该答案以获得更多说明。 https://stackoverflow.com/a/38216918/1506955

Angular子模块子级路由不起作用。无法匹配任何路线

2 个答案: