角度2：ルートパラメータを取得するときにswitchMapを使用する理由

Question

私はAngular Guide about Routing & Navigationを読んでいます。

彼らはserviceサービスとヒーローを取得するには、ルータのPARAM 'id'を取得し、それを使用するため、このコードを使用します。

ngOnInit() { 
    this.route.params 
    .switchMap((params: Params) => this.service.getHero(+params['id'])) 
    .subscribe((hero: Hero) => this.hero = hero); 
} 

しかし、私はよくでswitchMap演算子を使用する目的が何であるかを理解していません上記のコード。

次のコードは同じではありませんか？あなたには、いくつかの先頭に追加「イベント/ストリーム」によってトリガされたいくつかの非同期操作を持っている場合

ngOnInit() { 
    this.route.params 
    // NOTE: I do not use switchMap here, but subscribe directly 
    .subscribe((params: Params) => { 
     this.service.getHero(+params['id']).then(hero => this.hero = hero) 
    }); 
} 

Answer 1

switchMapは通常使用されています。

flatMapまたはconcatMapは、次のトリガが発行されるとすぐに、現在の非同期操作が取り消され、再トリガされます。

これは、route-paramsが変更されると、変更されたparamsでヒーローサービスが自動的に再度呼び出され、previouseコールがキャンセルされて古いデータを受信しないことを意味します。

これは、200〜300ms以上かかる可能性があり、ユーザーが入力中にトリガーされる検索クエリに特に役立ちます。

次のコードは同じではありませんか？あなたは次のシナリオを想像した場合、それは、多くの場合、同じように動作かもしれませんが

番号：

1. のparam変化 "4"
2. getHero(4)（非常に遅いリクエスト）
3. へparamが "1"に変更されます
4. getHero(1)（高速リクエスト）
5. getHero(1)完了 - >英雄が "1"
の
6. getHero(4)完了 - >ヒーローは今「4」ですが、最後に使用paramは、それは、すぐに新しいトリガとして古くなっているので、switchMapがちょうどgetHero(4) -callを捨てるような場合には「1」

ました起こる