Angular 2 Routes in child routes

Question

I have a route: / app / project / 23 / views

Each part of the path is a child of the previous part, and all children are lazy loaded (not sure if the lazy loaded bit is here)

/app (root component) /project (child component of app, child route of app) /23 (route param 'projectId') /views (child component of project, child route of project) 

I am trying to access the route parameter 'projectId' (in this case: 23)

Do the following:

 constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.params.subscribe(params => { console.log('params:', params); } 

Gives me an empty object for this.route.params

 params: {} 

However, by doing this:

 constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.parent.parent.params.subscribe(params => { console.log('params:', params); } 

Gives me what I'm looking for:

 params: Object {projectId: "23"} 

Since this is a child route, I need to specify this.route. parent.parent to get route parameters of (some) parent route?

Is there a better way to get the parameters from a complete route, because what happens if:

1) I change the depth of the children's route and move it one more step down. I need to change my code now to say this.route. parent.parent.parent .params

2) Or say that it is the 10th (generation ?, sub-child ?, great-great-great-great-grandmother?). Should I then say: this.route. parent.parent.parent.parent.parent.parent.parent.parent.parent .params

--- Edit: added routing configuration files ---

app.routing.ts

 const routes: Routes = [ {path: 'app', loadChildren: './views/private/private.module#PrivateModule'} ]; 

private.routing.ts

 const routes: Routes = [{ path: '', component: PrivateComponent, children: [ {path: 'project', loadChildren: './project/project.module#ProjectModule'}, {path: '', redirectTo: 'project', pathMatch: 'full'} ] 

project.routing.ts

 const routes: Routes = [{ path: ':projectId', component: ProjectComponent, children: [ {path: 'views', loadChildren: './views/views.module#ViewsModule'}, {path: '', redirectTo: 'views', pathMatch: 'full'} ] 

Answer 1

You can access the route tree using the pathFromRoot property; it returns an ActivatedRoutes array with all parents.

 this.route.pathFromRoot[2].params 

Answer 2

For the reasons you mentioned, I also think that deciding to localize route parameters is a bad decision. This is not how server side routing works, I'm not sure why they think their router should be different.

Since I also cannot rely on a parameter, I need to always be the same path on the route, I have a more general solution that will combine all the parameters into a single Observable.

 import { Observable } from 'rxjs/Observable'; import { map } from 'rxjs/operators'; import { ActivatedRoute, Params } from '@angular/router'; /** * Merges all parameters within the routing tree into a single observable. * This allows child routes to access parameters from their parents * @param route An activated route */ export function routeParams(route: ActivatedRoute): Observable<Params> { return Observable.combineLatest(route.pathFromRoot.map(t => t.params)) .pipe( map(paramObjects => Object.assign({}, ...paramObjects)) ); } 

A usage example will be included if you have a route person\1\view\details , where 1 is the id parameter of several parents above in your routing configuration. If you need the id parameter in the details route, if you use the above code and subscribe to this observable, you will return {"id": "1"}

routeParams(this.route).subscribe(params => console.log(params) )