Search code examples
angularangular-routingrouteparams

Angular - Route Params for child routes


I have the following routing configuration. How would it be possible to access the :projectId seen in the parent route from inside the project edit component?

 {
        path: 'folders/:folderId/projects/:projectId/s',
        component: ProjectDetailComponent,
        canActivate: [AuthGuardService],
        children: [
            {
                path: 'edit',
                component: ProjectEditComponent,
                canActivate: [AuthGuardService],
            },
            {
                path: 'i',
                component: IssuesListComponent,
                canActivate: [AuthGuardService],
            },
        ],        
    },

I previously used this approach when I didn't have children routes:

this.activatedRoute.params.subscribe((urlParameters) => {
  this.project_id = urlParameters['projectId'];
});

This no longer works unfortunately.


Solution

  • You should be able to access parent route parameters by using ActivatedRoute parent property:

    this.activatedRoute.parent.params.subscribe((urlParameters) => {
      this.project_id = urlParameters['projectId'];
    });