子路径中的Angular 2路径参数

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 here is relevant)

/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'm trying to access the route parameter 'projectId' (in this case: 23)

Doing 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 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"}

Because it is a child route, do I have to specify this.route. parent.parent to get the route params of (some) parent route?

Is there any better way of getting the params from the full route because what happens if:

1) I change the depth of the child route and move it one more step down. Do I have to change my code now to say this.route. parent.parent.parent .params

2) Or say it's the 10th (generation?, sub-child?, great-great-great-grandchild?). Do I then have to say: this.route. parent.parent.parent.parent.parent.parent.parent.parent.parent .params

--- Edit: added routing config 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

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

As I also cannot rely on the parameter to always be in the same path on a route, I have a more generic solution that will combine all 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))
        );
}

Example usage would be on if you have a route person\\1\\view\\details where 1 is the id parameter several parents above in your routing config. If you want the id parameter in the details route, if you use the above code and subscribe to that observable, you will get back {"id": "1"}

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

Answer 2

您可以使用pathFromRoot属性访问路由树，它会返回一个包含所有父级的ActivatedRoutes数组。

this.route.pathFromRoot[2].params