Question

我有以下路由器：

const appRoutes: Routes = [
  { path: '', component: LoginComponent},
  { path: 'login', component: LoginComponent },
  { path: 'main', component: MainComponent, canActivate: [AuthGuard], children: [
      { path: 'client', component: ClientComponent, outlet: 'c', children: [
          { path: 'clientinfo', component: ClientInfoComponent, outlet: 'i', children: [
              { path: 'cafe', component: ClientCafeComponent},
              { path: 'membership', component: ClientMembershipComponent },
              { path: 'pt', component: ClientPtComponent }
            ] }
        ] },
      { path: 'coach', component: CoachComponent, outlet: 'c'}] },
,
];

如何使用 [routerLink] = '.....' 从 ClientComponent 加载 ClientInfoComponent 和从 ClientInfoComponent 加载 ClientMembershipComponent ？

我尝试过类似的方法：

[routerLink]="['/main/(c:client)/(i:clientinfo/)']"

但没有运气

提前致谢

Answer 1

最后我找到了我的问题的答案并想分享它。我重写了我的路线如下：

const appRoutes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full'},
  { path: 'login', component: LoginComponent },
  { path: 'main', component: MainComponent, canActivate: [AuthGuard], children: [
      { path: 'client', component: ClientComponent, canActivate: [AuthGuard], outlet: 'c' },
      { path: 'client/clientinfo', component: ClientInfoComponent, outlet: 'c', children: [
          { path: 'cafe', component: ClientCafeComponent},
          { path: 'membership', component: ClientMembershipComponent },
          { path: 'pt', component: ClientPtComponent }
        ] },
      { path: 'coach', component: CoachComponent, outlet: 'c'}] },
];

在 ClientComponent 中：

[routerLink]="['/main', { outlets: { c: ['client', 'clientinfo']}}]"

希望能帮助到那里的人。

Angular 11 嵌套命名路由器插座

1 个答案: