角度访问嵌套模块中的父参数答案

【问题标题】：Angular accessing parent parameter in nested modules角度访问嵌套模块中的父参数
【发布时间】：2022-01-27 05:49:17
【问题描述】：

我正在尝试将 Angular 12 项目划分为（延迟加载）模块，但在访问其中一个子路由中的路由参数时遇到了问题。我有以下（简化的）模块结构：

app.module
| settings.module
| core.module

app.module 我有以下路线：

{ path: 'portfolio/:portfolio', component: PortfolioComponent, canActivate: [AccessGuard],
      children: [
         { path: 'settings', component: PortfolioSettings, canActivate: [PortfolioAccessGuard],
               children: [
                  { path: 'product-settings', loadChildren: () => import('./product-settings/product-settings.module').then((m) => m.ProductSettingsModule) },
         ]}
]}

product-settings.module的路径如下：

{ path: '', component: ProductSettingsComponent, canActivate: [PortfolioAccessGuard] },
{ path: ':product', component: ProductSettingsComponent, canActivate: [PortfolioAccessGuard], children [...] }

这样您就可以获得以下路线：

.../portfolio/somePortfolioId/settings
.../portfolio/somePortfolioId/settings/product-settings
.../portfolio/somePortfolioId/settings/product-settings/someProductId

访问保护位于 core.module 中。

如您所见，要访问上述路由，PortfolioAccessGuard 需要通过。在这个 PortfolioAccessGuard 中，我想检查 :portfolio 参数。当我访问第一条路线时，它可以使用以下代码：

route.parent.parent.params.portfolio（路由是一个ActivatedRouteSnapshot）

但是，当我从子路由（通过产品设置）访问它时，我似乎找不到这个参数。我尝试了几种使用 angular ActivatedRoute、ActivatedRouteSnapshot 和 Router 的方法，但我还没有找到一个可行的方法。我尝试过的一些示例：

this.activatedRoute.queryParams.subscribe(values => console.log(values)) 其中activatedRoute 的类型为ActivatedRoute 给出{}。
打印类型为 ActivatedRouteSnapshot 的 this.activatedRouteSnapshot 会导致数据、参数、queryParams 和 url 为空，甚至不存在父级。
打印 Router 类型的 this.router 显示其属性 browserUrlTree 包含有关我正在查找的参数的一些信息，但我不知道如何访问它。

所以我的挣扎如下：从访问最后两个提到的路线中找到这个 :portfolio 参数的最佳方法是什么？

【问题讨论】：

标签： angular parameters angular-routing angular-module

【解决方案1】：

当您使用 this.activatedRoute.queryParams.subscribe(values => console.log(values)) 时，您访问的是 QueryParams 而不是 Params。

尽量不要让路由的父级所有参数和查询参数必须在当前路由快照中可用。

Don't Use:
route.parent.parent.params.portfolio;

Try Use:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  const id = route.params['portfolio'];
  console.log(id);
}

【讨论】：

【解决方案2】：

您正在尝试访问上面提到的路由中未定义的 queryParams。

您可以通过以下方式解决：

constructor(private route: ActivatedRoute) {}

ngOnInit() {
 this.route.paramMap.subscribe(paramsMap => {
  const portfolio = paramsMap.params['portfolio'];
 });
}

这可能会有所帮助。

谢谢

【讨论】：