Angular2 ngrx /存储路径参数

我正在更新应用程序以使用ngrx/store，但我无法弄清楚如何使它与路由参数一起工作。Angular2 ngrx /存储路径参数

目前，我只是使用ActivatedRoute和使用this.route.params里面的ngOnInit()我的组件。所以像这样：

ngOnInit(): void { 
    this.route.params 
     .switchMap((params: Params) => { 
     return this.item_service.get(params['item_id']) 
     }) 
     .subscribe((item) => { 
     this.item = item; 
     }); 
}

现在，我使用的是ngrx/store，我需要使用商店的observable。基本上我试图做到这样的事情：

this.item = this.store.select('item').filter((item: Item) => { 
    return item.id == magically_obtained_params['item_id']; 
});

有没有办法使这项工作？

更新（2016年12月6日）：

我加an answer对FunStuff's answer扩大，因为它并没有完全提供我想要的东西。我还没有接受任何答案，因为我认为可能有更好的方法来处理这个问题。

为了澄清我的问题，我试图以this.item是Observable的方式进行此项工作。

来源

2016-12-05 twiz

您可以使用Rx combinelatest。

通过使用选择器功能每当可观察序列的任何产生元件合并所指定的观察序列为一个可观察到的序列。

this.item = Rx.Observable.combineLatest(
    this.store.select('item'), 
    this.route.params 
); 

this.item.subscribe([item, params] => { 
    return item.id == params['item_id']; 
});

来源

2016-12-05 06:24:21 Bazinga

我被指出正确的方向感谢到FunStuff's answer，但它并没有完全回答如何使用combineLatest()有关的Angular2组件。

这里是我想出了让你在组件上设置一个Observable属性的解决方案：

ngOnInit(): void { 
    this.item = Observable.combineLatest(
     this.store.select('item'), 
     this.route.params 
    ).switchMap(function(items, params) { 
     return items.filter((item) => { 
      return item.id == params['item_id']; 
     }) 
    }); 
}

这个工作，但我的情况，我决定走了一步。我没有使用combineLatest()，而是将switchMap()中的过滤器逻辑转移到我的服务中。

通过此实现，那么我的组件看起来像：

ngOnInit(): void { 
    this.route.params.subscribe((params: Params) => { 
     this.item = this.item_service.getItem(params['item_id']); 
    }); 
}

而且对我的服务，我有这样的方法：

getItem(item_id: string): Observable<{}> { 
    return this.store.select('item').switchMap((items: any) => { 
     return items.filter((item: any) => { 
      return item.id == item_id; 
     }); 
    }); 
}

我想我喜欢，因为该组件没有按”这更好t完全需要了解Store，并且它不需要结合Observables。

来源

2016-12-07 03:07:11 twiz

Angular2 ngrx /存储路径参数

回答

相关问题