时间戳

首页 > 解决方案 > Angular 11嵌套命名路由器出口

angular - Angular 11嵌套命名路由器出口

问题描述

我有以下路由器：

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/)']"

但没有运气

提前致谢

标签： angulartypescript

解决方案

最后，我发现了我的问题的一个问题，并想分享它。我重写了我的路线如下：

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']}}]"

希望能帮助那里的人。

推荐阅读