Angular 11的嵌套命名路由器出口

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和ClientMembershipComponent"?

我试过这样做:

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

but no luck

thanks in advance

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'}] },
];

and in ClientComponent:

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

希望这能帮助到别人。