連接若干RxJS可觀察運算符的問題

我正在嘗試查找最乾淨的解決方案和運算符以鏈接可觀察對象。連接若干RxJS可觀察運算符的問題

我的要求如下：

從路徑檢索PARAMS
使用userAcccountToken爲了做一個HTTP調用到後端
再爲了做其他使用userAcccountToken http呼叫到後端
最後導航到路線（即/dashboard），如果全部走得好。

我的角2成分如下：

import {Component, OnInit} from '@angular/core'; 
import {UserAccountService} from '../useraccount.service'; 
import {ActivatedRoute, Router} from '@angular/router'; 
import {SessionService} from '../../session/session.service'; 


@Component({ 
    templateUrl: 'useraccount-activation.component.html' 
}) 
export class UserAccountActivationComponent implements OnInit { 

    constructor(private userAccountService: UserAccountService, 
       private sessionService: SessionService, 
       private router: Router, 
       private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.route.params.map(params => params['userAccountToken'])//1. 
     .switchMap(userAccountToken => this.userAccountService.activateAccount(userAccountToken))//2. 
     .switchMap(() => this.sessionService.signinByUserAccountToken('???'))//3. 
     .subscribe(() => this.router.navigate(['/dashboard']));//4. 
    } 
}

的問題是，我需要在兩個地方，但我要訂閱到兩個HTTP調用，使它們被執行。

我可以在2和3之間執行另一個this.route.params.map(...)，但似乎重複了我自己。

我可以在組件中使用實例變量引入狀態，但隨後我的功能會產生副作用。

什麼可能是這個問題的乾淨解決方案？

編輯：下面的代碼：

ngOnInit() { 
    this.route.params.map(params => params['userAccountToken']) 
     .mergeMap(userAccountToken => Observable.concatAll(
     this.userAccountService.activateAccount(userAccountToken), 
     this.sessionService.signinByUserAccountToken(userAccountToken) 
    )) 
     .subscribe(() => this.router.navigate(['/dashboard'])); 
    }

產生以下錯誤：

__WEBPACK_IMPORTED_MODULE_4_rxjs_Observable__.Observable.concatAll is not a function

即使我已經進口import 'rxjs/add/operator/concatAll';

編輯2：我之所以得到上面的錯誤是我在0上使用而不是類型爲Observable的實例/對象...

來源

2016-08-19 balteo

假設兩個後端調用都可以並行完成，則可以使用forkJoin。如果你必須一個接一個地完成，你可以使用嵌套的mergeMap。

const token$ = Rx.Observable.of('token') 
 

 
token$ 
 
    .mergeMap(token => Rx.Observable.forkJoin(
 
    Rx.Observable.of(token), 
 
    Rx.Observable.of(token) 
 
)) 
 
    .subscribe(val => console.log(val));

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>

側面說明：你真的應該導出此功能集成到一個服務;）

來源

2016-08-19 13:55:16

由於塞巴斯蒂安。你能提供一個我的'ngOnInit'看起來像樣的樣品嗎？ – balteo

添加了一個可執行示例，顯示如何使用forkJoin。 –

謝謝。我其實需要'concatAll'，因爲一個http調用需要在另一個之前發出。我會更新我的代碼。忍受着我。 – balteo

連接若干RxJS可觀察運算符的問題

回答

相關問題