Angular accessing parent parameter in nested modules-CodePudding

I am trying to divide an Angular 12 project into (lazyload) modules, but I'm running into a problem with accessing the route parameters in one of the child routes. I have the following (simplified) module structure:

app.module
| settings.module
| core.module

I have the following route for 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) },
         ]}
]}

And the following route for product-settings.module:

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

So that you could for example get the following routes:

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

The access guards are located in the core.module.

As you can see, to access the above routes, the PortfolioAccessGuard needs to pass. In this PortfolioAccessGuard I want to perform a check on the :portfolio parameter. When I access the first route, this works, with the following code:

route.parent.parent.params.portfolio (route is an ActivatedRouteSnapshot)

However, when I'm accessing it from the child route (via product-settings), I can't seem to find this parameter. I tried several methods with the angular ActivatedRoute, ActivatedRouteSnapshot and Router, but I haven't found a working one. Some examples that I've tried:

this.activatedRoute.queryParams.subscribe(values => console.log(values)) where activatedRoute is of type ActivatedRoute gives {}.
printing this.activatedRouteSnapshot which is of type ActivatedRouteSnapshot gives that data, parameters, queryParams and url are empty, parent doesn't even exist.
printing this.router which is of type Router shows that its property browserUrlTree contains some information about the parameter I'm looking for, but I don't know how to access it.

So my struggle is the following: What is the best way to find this :portfolio parameter from accessing the last two mentioned routes?

CodePudding user response：

When you use this.activatedRoute.queryParams.subscribe(values => console.log(values)) you access QueryParams not Params.

Try not to get parents of the route all parmas and query params must be available in the current route snapshot.

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

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

CodePudding user response：

You are trying to access queryParams which is not defined in route as you mention above.

You can resolve on following way:

constructor(private route: ActivatedRoute) {}

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

This might be helpful.

Thanks