我需要从路由中获取参数,但它既不是父级也不是祖先级,而是在路径往根部的某个位置上。我知道像Angular 2: getting RouteParams from parent component或共享服务等方法,但我认为自己的情况并不适合这些方法。所以我得到了以下信息:
我懒加载了子模块,它需要从父级上下文中获取id
。在路由配置中,情况大致如下:
// Parent/outer module routing
const outerRoutes: Routes = [
{
path: 'container/:containerId',
component: ContainerComponent,
children: [
{ path: 'model', loadChildren: 'app/container/model/model.module#ModelModule' },
{ path: '', component: ContainerDetailsComponent }
]
}
];
// Child/inner module routing
const innerRoutes: Routes = [
{
path: '',
component: ModelComponent,
children: [
{ path: ':id', component: ModelDetailsComponent },
{ path: '', component: ModelsComponent }
]
}
];
ModelsComponent
需要加载属于给定 Container
的所有 Model
实例。因此,我决定采用 .parent
方法,但写完第二个 .parent
后我的牙齿开始疼了,还有第三个要写:
this.route.parent.parent.parent.params
.switchMap((params: Params) => this.modelService.getAllBelongingTo(params['containerId']))
.subscribe(
(models: Model[]) => this.models = models,
error => this.raceEvent = null
);
共享服务可能是一种选择,但由于子模块是按需加载的,我必须将其放在核心模块中,使其变得相当全局化(这不是我喜欢的)。
经过一番努力,我得到了以下代码,它简单地获取所有的ActivatedRoute
直到根节点,组合它们,查找参数并使用它。我不喜欢它,因为我认为它太复杂,难以阅读,而且很糟糕(或者换句话说,非常恶心),但它有效,而且我不必担心嵌套结构的变化。我只需要确保:containerId
在通向根节点的路径上的某个地方。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Model } from './model';
import { ModelService } from './model.service';
@Component({
...
})
export class ModelsComponent implements OnInit {
models: Model[];
constructor(
private route: ActivatedRoute,
private modelService: ModelService) { }
ngOnInit() {
const paramsArr = this.route.pathFromRoot.map(route => route.params);
Observable.combineLatest(paramsArr)
.switchMap(arrOfParams => {
const params = arrOfParams.find(p => p['containerId'] !== undefined),
id = params && params['containerId'];
return id ? this.modelService.getAllBelongingTo(id) : [];
})
.subscribe(
(models: Model[]) => {
// yay! we got sth
this.models = models;
},
error => {
// handle big nono
}
);
}
}
有没有更好的方式来处理所描绘的情况?