gpt4 book ai didi

angular - 有没有更好的方法在 Angular2 中获取祖先路由参数?

转载 作者:太空狗 更新时间:2023-10-29 17:03:23 24 4
gpt4 key购买 nike

我需要从不是父节点甚至不是祖父节点的路由获取参数,它只是在上面的某个地方,沿着通往根的路径。我知道像 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 之后我的 dentry 开始疼了,还有第三个要来:

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
}
);
}
}

是否有更好的方法来处理描述的情况?

最佳答案

总的来说,我认为您的方法确实有道理。

我不知道代码的确切背景,但它确实感觉像是一个子组件想要了解很多关于父实例数据的信息,我同意@Aravind 的评论,这可能最好在全局状态管理中处理redux 或 ngrx 等解决方案。话虽这么说,如果这就是您所需要的,我知道您不会想引入那种程度的复杂性。

我只会对您的 rxchain 做一些小的调整,以使其更具可读性。

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;

Observable.from(paramsArr)
.map(route => route.params)
.filter(params => params.containerId)
.switchMap(containerId => this.modelService.getAllBelongingTo(containerId))
.subscribe(
(models: Model[]) => {
// yay! we got sth
this.models = models;
},
error => {
// handle big nono
}
);
}
}

请注意,此实现只会在有 containerId 作为父级参数时设置 this.models

编辑 1:修复拼写错误

关于angular - 有没有更好的方法在 Angular2 中获取祖先路由参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42674759/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com