如何使用activatedRoute从子组件获取父路由参数？

Question

I am working with a child component and I am having trouble getting access (I think) to it's parent route params.

My url looks like this:

/settings/organizations/26ee00d1-9fd8-4e38-a195-024c11ae0958/locations/914adefe-6b08-4f7a-9e3e-fa671a52fd3c/resources

Here is what my route(s) look like:

// routes.ts

path: 'settings/organizations/:organizationId/locations/:locationId',
component: LocationSettingsSummaryComponent,
children: [
    {
        path: '',
        component: LocationSettingsComponent,
    },
    {
       path: 'resources',
       component: ResourcesSummaryComponent,
    },
]

Here is what my child component looks like:

// resources-summary.commponent.ts

...

organizationId!: string;
locationId!: string;

constructor(
    ...
    private readonly activatedRoute: ActivatedRoute
) {}


ngOnInit(): void {
    this.organizationId = this.activatedRoute.snapshot.paramMap.get('organizationId');
    this.locationId = this.activatedRoute.snapshot.paramMap.get('locationId')';

    console.log(this.activatedRoute.snapshot.params); // {}
}

In other components, I have been able to get to an organiationId via:

this.activatedRoute.snapshot.paramMap.get('organizationId')

For example, getting location details, I'm able to use this url and get the apropreate parameters

/settings/organizations/26ee00d1-9fd8-4e38-a195-024c11ae0958/locations/914adefe-6b08-4f7a-9e3e-fa671a52fd3c


this.locationId = this.activatedRoute.snapshot.paramMap.get('locationId')'; // 914adefe-6b08-4f7a-9e3e-fa671a52fd3c

I have tried various methods of getting the parent:

console.log(this.activatedRoute.parent?.params); // {}

But that too seems to always be empty, or an empty object.

I found it interesting that from my component if I do this:

console.log(this.activatedRoute.snapshot); // resources

It seems like Angular is having trouble finding the parent?

In this component, the activatedRoute params seem to always be empty. How can I get access to the route params from this child component?

Answer 1

You can get the paramMap from the parent of the ActivatedRoute like the following:

const parentParamMap = this.activatedRoute.parent.snapshot.paramMap;
const organizationId = parentParamMap.get('organizationId');