如何在兩個Angular 2訂閱完成後調用一個函數？

Question

我在Angular 2.3.1上，對於Angular和基於事件的編程我都很新。我有兩個訂閱，route.params.subscribe和engineService.getEngines()。在我的onInit中，我想在完成this.route.params.subscribe和this.engineService.getEngines().subscribe之後致電getEngineName。

之所以這樣：getEngineName功能依賴於engineId從queryParams和engines陣列被getEngines()呼叫完成後填充。

我看過flatMap和switchMap但我沒有完全理解它們。

這是組件的代碼：

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

你爲什麼不只是移動route.params回調裏面的邏輯是什麼？

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); 
    }); 
}); 

與flatMap和forkJoin：

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; 
     }); 
    } 

假設ENGINEID在PARAMS變化，第一觀察到this.route.params.pluck('engineId')將發出的數據，這將導致在未來觀察的this.engineService.getEngines()被炒魷魚。現在假設在這個可觀察數據發出之前路由發生了變化。在這裏您需要取消getEngines可觀察才能防止出錯。這由switchMap完成。

switchMap如果外部可觀察性被觸發，則取消內部可觀察性。

PS：我已避免保留任何狀態，如this.engineId等