Question

我有一条路线：/ app / project / 23 / views

路径的每个部分都是前一部分的子节点，并且所有子节点都是延迟加载的（不确定此处的延迟加载位是否相关）

/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)

我试图访问路线参数＆＃39; projectId＆＃39; （在这种情况下：23）

执行以下操作：

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

给了我一个空的对象this.route.params

params: {}

然而这样做：

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

给我我正在寻找的东西：

params: Object {projectId: "23"}

因为它是子路由，我是否必须指定this.route。 parent.parent 来获取（某些）父路由的路由参数？

有没有更好的方法从完整路线获取参数，因为如果出现以下情况：

1）我改变了儿童路线的深度，再向下移动一步。我现在必须更改我的代码才能说出.route。 parent.parent.parent .params

2）或者说它是第10代（一代？，子孩子？，伟大的曾孙子？）。我是否必须说：this.route。 parent.parent.parent.parent.parent.parent.parent.parent.parent .params

---编辑：添加路由配置文件---

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

由于您提到的原因，我也认为本地化路线参数是一个糟糕的设计决策。这不是服务器端路由的工作原理，我不确定为什么他们觉得他们的路由器应该有所不同。

由于我也不能依赖参数始终在路径上的相同路径中，因此我有一个更通用的解决方案，它将所有参数组合到一个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))
        );
}

如果您的路由配置中有person\1\view\details路由1是id个参数，那么将使用示例用法。如果您想在details路线中使用id参数，如果您使用上述代码并订阅该可观察量，您将返回{"id": "1"}

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

Answer 2

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

this.route.pathFromRoot[2].params

儿童路线中的Angular 2 Route Params

2 个答案: