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 /存儲路徑參數

回答

相關問題