URLパラメータでページを読み込む前にngrxアクションを待っています

Question

ngrxを使用してng2アプリケーションを構築しています。アプリケーションが起動すると、初期データを取得するためにWebサービスが呼び出されます。このデータが取得されると、INIT_DONEアクションが作成されます。

私の国は次のようになります。

export interface State { 
    documents: Document[]; 
    selectedDocument: Document 
} 

私は456がURLパラメータであるページ/マイページ/ 456に行くとき、私はのようなURLパラメータを取得するように、フェッチされたデータの一部を取得する必要がありますこれ：

ngOnInit() { 
    this.paramSubscription = this.route.params 
    .select<string>('id') 
    .map((id) => new SelectAction(id)) 
    .subscribe(this.store); 
} 

SELECT_ACTIONがフェッチデータセットselectedDocumentの要素を見つけます。問題は、SELECT_ACTIONがINIT_DONEより前に作成され、その時点でdocumentsが空であることです。

ページをロードする前に、INIT_DONEを待つ方法を教えてください。

Answer 1

。さらに、フィルターを使用してドキュメントが設定されていることを再確認します（ここでは配列であると仮定しています）。

ngOnInit() { 
    this.subscription = Observable.combineLatest(
     this.store.select("documents") 
      .filter(documents => documents.length > 0), 
     this.paramSubscription = this.route.params 
      .select<string>('id') 
) 
    .map((combinedData: [Object[], string]) => combinedData[1]) 
    .subscribe(this.store); 
} 

また、サブスクリプションを変数に割り当て、コンポーネントが破棄されたときにサブスクライブ解除できるようにします。それ以外の場合は、コンポーネントが破棄された後にサブスクリプションが行われ、アクションがまだ放出される可能性があります。

ngOnDestroy() { 
    this.subscription.unsubscribe(); 
} 

Answer 2

あなたはストアからドキュメントを選択し、それに加入し、そこから自分の行動を発することができます：それは、複数のソースストリームの最新の値を組み合わせたとして、私はcombineLatest演算子を使用することでしょう

ngOnInit() { 
    this.store.select("documents").subscribe(documents => { 
    this.paramSubscription = this.route.params 
     .select<string>('id') 
     .map((id) => new SelectAction(id)) 
     .subscribe(this.store); 
    }); 
} 

Answer 3

解決者が必要です。レゾルバは、ナビゲーション操作を完了する前に、データが利用可能になるまで待ちます。ルート設定で

@Injectable() 
export class DocumentsResolver implements Resolve { 

    constructor(
     private store: Store 
    ) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero> { 
     // take id from snapshot 
     const id = route.params['id']; 
     // start with the document list 
     return this.store.select('documents') 
      // wait until there is data available 
      .filter(documents => documents && documents.length > 0) 
      // then produce the selected document 
      .mergeMapTo(this.store.select('selectedDocument')); 
    } 
} 

：_document_対_documents_：ルータの解決here