Angular ID 不做任何事情的子路由

Question

首先，我对 'noobish' 问题表示歉意，但我已经仔细研究了所有解决方案，但我还是想不通。

我的子路由不工作。当我点击 link 时，它既没有抛出错误也没有重定向，所以我不知道如何调试它。

这在我的应用程序中-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'tools', component: ToolsComponent, outlet: 'forum' },
      {
        path: 'tutorials',
        component: TutorialsComponent,
        outlet: 'forum',
        children: [{ path: 'tutorials/:id', component: UsecasesComponent, outlet: 'forum' }]
      },

      { path: 'scripts', component: ScriptsComponent, outlet: 'forum' }
    ]
  },
  { path: 'about', component: UsecasesComponent },
  { path: '**', redirectTo: '/' }
]

这是有问题的代码：

children: [{ path: 'tutorials/:id', component: UsecasesComponent, outlet: 'forum' }]

在我的主题 -card.component.html 中，我生成了一个 link 像这样：

<a mat-list-item [routerLink]="[{ outlets: { forum: ['tutorials', '1'] } }]">TESTLINK</a>

网页图片：

这是生成的 link：http://localhost:4200/dashboard/(forum:tutorials/(forum:tutorials/1))

因此，当我单击 link 时，没有任何反应。有人知道这里可能出了什么问题吗？

Answer 1

尝试：

<a mat-list-item [routerLink]="[{ outlets: { forum: ['tutorials', '{id: 1}'] } }]">TESTLINK</a>

或者您可以简单地传递值：

<a mat-list-item [routerLink]="[{ outlets: { forum: ['tutorials', 1] } }]">TESTLINK</a>

Answer 2

当您使用子路径时，您不必在子路径中重复路径的某些部分

此外，这不是使用插座的正确方法，相反，您将让默认的（确保删除指令中的 name 属性）处理应用程序中的导航：

const routes: Routes = [
 { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
 {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'tools', component: ToolsComponent },
      { path: 'tutorials', component: TutorialsComponent},
      { path: 'tutorials/:id', component: TutorialsPostComponent},
      { path: 'scripts', component: ScriptsComponent}
     ]},
 { path: 'about', component: UsecasesComponent },
 { path: '**', redirectTo: '/' }
]

您可以使用绝对路径以这种方式使用 routerLink 导航：

<a mat-list-item [routerLink]="['/dashboard/tutorials', 1]">TESTLINK</a>

检查 angular 有关子路由的文档 here。

很好的 tutorial 了解路线如何在 angular 内运作。

Angular ID 不做任何事情的子路由

Angular child route with ID not doing anything

routing

angular