我正在努力找到最干净的解决方案和运营商,以便链接可观察量。
我的要求如下:
userAccountToken
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.
}
}
问题是我需要在两个地方userAccountToken
,但我需要订阅两个http调用,以便它们被执行。
我可以在2.和3之间执行另一个this.route.params.map(...)
,但这似乎在重复我自己。
我可以使用userAccountToken
实例变量在组件中引入状态,但是我的函数会创建副作用。
对于这个问题,什么可以是一个干净的解决方案?
修改:以下代码:
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 :我收到上述错误的原因是我在concatAll
上使用Observable
而不是在Observable
类型的实例/对象上使用for node in nodes:
print(node.text)
。 ..
答案 0 :(得分:1)
您可以使用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/rxjs@5.0.0-beta.11/dist/global/Rx.umd.js"></script>
附注:您应该将此功能真正导出到服务中;)