在Angular 14中访问父路由器参数

Question

使用Angular 14，要有一个路由配置:

const routes: Routes = [{
path: ':page',
component: PageComponent,
children: [
{
canActivate: [ValidPathGuard],
path: ':subPage',
component: SubPageComponent
}
]
}
]

ValidPathGuard:

export class ValidPathGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot) {
console.log(route);
}
}

路线。参数只输出:{subPath: 'subPath'}

如果我想访问:page需要使用route.parent.params: {path: 'path'}

但是如果我使用三层路由呢?

问题是我怎么能得到所有参数的对象?如:{路径:"路径",子路径:"子路径"}

Answer 1

尝试访问路由的父实例，并继续搜索父实例，直到没有父实例(使用递归)

function mergeRouteParams(route: ActivatedRouteSnapshot, getter: (r: ActivatedRouteSnapshot) => Params): Params {
if (!route) {
return {};
}
const currentParams = route.params;
return { ...mergeRouteParams(route.parent), ...currentParams };
}