Angular2 ngrx/store с параметрами маршрута
Я обновляю приложение для использования ngrx/store, но не могу понять, как заставить его работать с параметрами маршрута.
В настоящее время я просто использую 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, мне нужно использовать наблюдаемый для магазина. В основном я пытаюсь сделать что-то вроде этого:
this.item = this.store.select('item').filter((item: Item) => {
return item.id == magically_obtained_params['item_id'];
});
Есть ли способ сделать эту работу?
Обновление (2016/12/06):
Я добавил ответ, чтобы расширить ответ FunStuff, так как он не предоставил полностью то, что я хочу. Я не принял ни одного ответа, так как думаю, что, вероятно, есть лучший способ справиться с этим.
Чтобы уточнить мой вопрос, я пытаюсь сделать эту работу таким образом, чтобы this.item
является Observable
,
2 ответа
Вы можете использовать Rx combinest.
Объединяет указанные наблюдаемые последовательности в одну наблюдаемую последовательность с помощью функции селектора всякий раз, когда любая из наблюдаемых последовательностей производит элемент.
this.item = Rx.Observable.combineLatest(
this.store.select('item'),
this.route.params
);
this.item.subscribe([item, params] => {
return item.id == params['item_id'];
});
Благодаря ответу FunStuff я получил правильное направление, но он не полностью ответил, как использовать 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;
});
});
}
Я думаю, что мне это нравится больше, так как компонент не должен знать о Store
на всех, и это позволяет избежать необходимости сочетать Observables
,