Question

我是Angular2和一般前端开发的新手，所以如果我错过了明显的答案，我很抱歉。

我正在开发Angular2应用。我不确定在我正在开发的组件中完成任务的最佳方法。

ngOnInit() {
    console.log("init component");
    console.log(this.activatedRoute);

    this.paramSub = this.activatedRoute.params.switchMap(
        (params: Params) => this.personSearchService.getPerson(params['personId']))
        .subscribe(result => this.personDetails = result);

    this.orgSub = this.personSearchService.getPersonFedOrgs(0).subscribe(
        results => this.orgs = results,
        error => console.log(error)
    );

    //pseudo-code
    watch this.orgs and this.personDetails
        if change
            do logic
}

在OnInit生命周期钩子中，我做了两件事，我得到了一个带有服务的路由参数，我还得到了第二个服务的组织列表。所有这些都很好。

我标记为伪代码的部分是我想要添加的功能。我想获取前两个服务调用的结果并执行一些业务逻辑。

我知道我无法直接使用this.personDetails和this.orgs，因为它们将被取消定义（直到异步调用被解析）。所以我认为我需要将它们包装在一个Observable中，这样我每次更新时都可以执行一些逻辑。但我不确定如何做到这一点。任何指向正确方向的人都会非常感激。

Answer 1

您可以使用cobmineLatest()运算符。为了便于阅读，我重新编写了一些代码：

personDetails$ = this.activatedRoute.params
  .map((params: Params) => params['personId'])
  .switchMap(id => this.personSearchService.getPerson(id))

orgs$ = this.personSearchService.getPersonFedOrgs(0)

Observable.combineLatest(personDetails$, orgs$)
  .subscribe(([details, orgs]) => {
    console.log(details, orgs);
  })

别忘了导入运营商：

import 'rxjs/add/observable/combineLatest';

Answer 2

CombineLatest完成这项工作，但是，如果其中一个流发出了任何值，它会发出一个值，因此当它们都实际发出值时，你无法确定是否收到通知。

为此，你需要压缩它们：d

    this.paramSub = this.activatedRoute.params.switchMap(
        (params: Params) => this.personSearchService.getPerson(params['personId']));

    this.orgSub = this.personSearchService.getPersonFedOrgs(0)


Observable.zip(this.paramSub, this.orgSub)
  .subscribe(result) => {
    console.log(result);
  })

如何对多个可观察量进行排序

2 个答案: