2016-12-05 2 views
0

Я обновляю приложение для использования ngrx/store, но не могу понять, как заставить его работать с параметрами маршрута.Angular2 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/магазин, мне нужно использовать наблюдаемую для магазина. В основном я пытаюсь выполнить что-то вроде этого:

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

Есть ли способ сделать эту работу?


Update (2016/12/06):

Я добавил an answer расширить на FunStuff's answer, так как он не в полной мере обеспечивают то, что я хочу. Я не принял ни одного ответа, так как я думаю, что есть лучший способ справиться с этим.

Чтобы уточнить мой вопрос, я пытаюсь сделать эту работу таким образом, чтобы this.item был Observable.

ответ

3

Вы можете использовать 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']; 
}); 
1

я получил в правильном направлении, благодаря 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.

Смежные вопросы