2つのAngular 2サブスクリプションの完了後に関数を呼び出す方法は？

Question

私はAngular 2.3.1を使用しており、AngularとEventの両方のプログラミングにはかなり新しいです。私は2つのサブスクリプション、route.params.subscribeとengineService.getEngines()を持っています。私のonInitではthis.route.params.subscribeとthis.engineService.getEngines().subscribeの後にgetEngineNameに電話したいと思っています。このため

理由：getEngineName機能getEngines()コールの完了後に取り込まれqueryParamsとenginesアレイからengineIdに依存します。

私はflatMapとswitchMapを見ましたが、私は完全に理解していませんでした。あなただけroute.paramsコールバック内部のロジックを移動しないのはなぜ

export class ItemListComponent implements OnInit { 
 
    items: Item[]; 
 

 
    engines: Engine[]; 
 
    private engineId: number; 
 

 
    constructor(
 
    private router: Router, 
 
    private route: ActivatedRoute, 
 
    private itemService: ItemService, 
 
    private engineService: EngineService 
 
    ) {} 
 

 
    ngOnInit() { 
 
    this.route.params.subscribe((params: Params) => { 
 
     this.engineId = +params['engineId']; 
 

 
     // itemService is irrelevant to this question 
 
     this.itemService.getItems({engineId: this.engineId}) 
 
     .subscribe((items: Item[]) => { 
 
      this.items = items; 
 
     }); 
 
    }); 
 

 
    this.engineService.getEngines() 
 
     .subscribe(engines => this.engines = engines); 
 

 
    // This should only run after engineId and engines array have been populated. 
 
    this.getEngineName(this.engineId); 
 
    } 
 

 
    getEngineName(engineId: number) { 
 
    this.engines.find((engine) => { 
 
     return engine.id === engineId; 
 
    }) 
 
    } 
 
}

Answer 1

：

これは、コンポーネントのコードですか？ flatMapとforkJoinと

this.route.params.subscribe((params: Params) => { 
     this.engineId = +params['engineId']; 

     // itemService is irrelevant to this question 
     this.itemService.getItems({engineId: this.engineId}) 
     .subscribe((items: Item[]) => { 
      this.items = items; 
     }); 

    //this.engineId is defined here (1) 
    this.engineService.getEngines() 
     .subscribe((engines) => { 
     this.engines = engines; 
     //this.engines is defined here (2) 
     this.getEngineName(this.engineId); 
    }); 
}); 

：

this.route.params.flatMap((params: Params) => { 
     this.engineId = +params['engineId'];  

     return Observable.forkJoin( 
     this.itemService.getItems({engineId: this.engineId}), 
     this.engineService.getEngines() 
    )   
}).subscribe((data)=>{ 
    let items = data[0]; 
    let engines = data[1]; 
    this.items = items; 
    this.engines = engines; 
    this.getEngineName(this.engineId); 
}); 

Answer 2

switchMapこのシナリオで推奨されています。

this.route.params.pluck('engineId') //pluck will select engineId key from params 
     .switchMap(engineId => { 
      this.getItems(engineId); 
      return this.engineService.getEngines().map(engines => { 
       /*this.engineService.getEngines() emits the list of engines. 
        Then use map operator to convert the list of engines to engine we are looking for 
       */ 
       return engines.find((engine) => { 
        return engine.id === engineId; 
       }) 
      }) 
     }).subscribe(engine => { 
      //engine 
    }) 

    getItems(engineId) { 
     this.itemService.getItems({engineId: engineId}) 
     .subscribe((items: Item[]) => { 
      this.items = items; 
     }); 
    } 

はのparamsの変更にENGINEIDを仮定し、最初に観察this.route.params.pluck('engineId')は、次の観測可能this.engineService.getEngines()がクビになりますどの、データが出力されます。この観測値がデータを放出する前に経路が変化したとします。ここでは、エラーを防ぐために、getEnginesを観察してキャンセルする必要があります。これはswitchMapによって行われます。

switchMapは、外側の観測可能なイベントが発生した場合、そのイベントをキャンセルします。

PS：私はあなたがcombineLatestを使用することができ