Angular2オブザーブブルは共有する必要があります

Question

私は検索のためのフォーム入力を持っています。ユーザーが検索入力に何かを入力すると、2つの別々のAPIを呼び出す必要があります。これは私が達成しようとしているものです：

myInput: new FormControl(); 
listOne: Observable<string[]>; 
listTwo: Observable<string[]>; 

ngOnInit(){ 
    this.listOne = this.myInput.valueChanges 
        .debounceTime(500) 
        .distinctUntilChanged() 
        .switchMap(myInput => this._service.getListOne(myInput)); 

    this.listTwo = this.myInput.valueChanges 
        .debounceTime(500) 
        .distinctUntilChanged() 
        .switchMap(myInput => this._service.getListTwo(myInput)); 
} 

だから私の質問は、どのように私はvalueChangesに加入し、2つの異なる配列を埋めるために2つの異なるAPIを呼び出すのですか？上記のコードでは、最初の検索でうまくいきますが、検索テキストを変更すると、getListTwoだけが呼び出されます。ソースは、いくつかの加入者を持っており、あなたがそれらの加入者（つまりあなたがマルチキャスト複数の加入者にソース値にしたい）そのソースから同じ値を読みたいときはいつでも

Answer 1

は、あなたがshare必要があります。 sharedSource = this.myInput.valueChanges.debounceTime(500).distinctUntilChanged().share()、例えばので：あなたは対マルチキャスト冷たい流れの詳細な説明hereで見ることができ

myInput: new FormControl(); 
listOne: Observable<string[]>; 
listTwo: Observable<string[]>; 

ngOnInit(){ 
    this.listOne = sharedSource 
        .switchMap(myInput => this._service.getListOne(myInput)); 

    this.listTwo = sharedSource 
        .switchMap(myInput => this._service.getListTwo(myInput)); 
} 

意味ここ

。

Answer 2

ngOnInit(){ 
    input$ = this.myInput.valueChanges.debounceTime(500) 
         .distinctUntilChanged() 
         .share(); 

    this.listOne = input$.switchMap(myInput => this._service.getListOne(myInput)); 
    this.listTwo = input$.switchMap(myInput => this._service.getListTwo(myInput)); 

    //store subscriptions 
    this.subs$.push(input$,this.listOne,this.listTwo); 
} 

メモリリークを避けるために解除することを忘れないでください：

ngOnDestroy(){ 
    this.subs$.forEach(s => s.unsubscribe()); 
}