在收到两个不同的服务呼叫后显示页面

Question

我想在获得两个结果后显示页面 不同的服务调用。服务1 和服务 2 是两个不同的 服务业

don't want to use second service call inside of first service 
subscribe.service1 and service2 are two different services.
  this.service1.getProfile1(id).subscribe((data1) => {
         console.log(data1);
    });
  this.service2.getProfile2(id).subscribe((data2) => {
         console.log(data2);
    });

我如何发现我接到了两个服务电话？

Answer 1

您可以使用 rxjs https://www.learnrxjs.io/operators/combination/forkjoin.html 中的forkJoin

import { forkJoin } from 'rxjs';
forkJoin(
  this.service1.getProfile1(id), 
  this.service2.getProfile2(id)
).subscribe(([profile1, profile2]) => {
  console.log(profile1, profile2);
});

Answer 2

您可以通过以下方式将两个可观察量与分叉连接合并：

import { forkJoin } from 'rxjs';
    forkJoin([
      this.service1.getProfile1(id),
      this.service2.getProfile2(id),
    ]).subscribe(r => {
      const data1 = r[0];
      const data2 = r[1];
      console.log(data1);
      console.log(data2);
    });

调用被序列化，然后可观察到返回结果数组。项目的位置反映了您创建forkJoin的顺序。

Answer 3

实际上，

在这个特定的用例中，您正在导航用户并尝试使用两个端点进行服务调用。一旦收到来自这些端点的响应，您就会尝试将其与 fork join 合并并将其作为可观察对象发送到组件

但是在您的问题中，您正在寻找一种甚至在重定向到页面之前进行 http 调用的方法。在角度路由器中，对于此用例，有一个很好的方法。

您甚至可以在用户进入页面之前指定要执行的 http 调用。

在服务级别中实现解析，并在路由解析下定义该服务。

例 ：

import { Injectable } from '@angular/core';
import { APIService } from './api.service';
import { Resolve } from '@angular/router';
import { ActivatedRouteSnapshot } from '@angular/router';
@Injectable()
export class APIResolver implements Resolve<any> {
  constructor(private apiService: APIService) {}
  resolve(route: ActivatedRouteSnapshot) {
    return this.apiService.getItems(route.params.date);
  }
}

路线 ：

{ 路径："项目/:d"， 组件：项目组件， resolve： { items： APIResolver }}