Angular 4调用服务方法，其中包含来自上一个服务方法调用的数据

我目前正在学习Angular，同时创建一个网站，该网站旨在实时显示击剑比赛的结果，因为这些结果是从桌面竞赛管理器应用程序输入的

我在如何“链接”可观察订阅方面遇到了问题。 我已经做到了，但我很确定必须有一个更优雅的解决方案

当我去比赛的时候，我会通过Id来获得比赛，比如

getMatch(id: number){
    this._matchService.getMatch(id).subscribe
    (
      match => this.match = match,
      error => this.errorMessage = <any>error
    )

嵌套的.subscribe（）块是一种反模式

试试这个：

对于rxjs>5.5.2：

  getMatch(id: number) {
    const match$ = this._matchService.getMatch();

    const blueFencer$ = match$.pipe(
      flatMap(({ blueFencerId }) => this._matchService.getFencer(blueFencerId)),
    );

    const redFencer$ = match$.pipe(
      flatMap(({ redFencerId }) => this._matchService.getFencer(redFencerId)),
    );

    const pool$ = match$.pipe(
      flatMap(({ poolId }) => this._poolService.getPool(poolId)),
    );

    const competition$ = pool$.pipe(
      flatMap(({ competitionId }) =>
        this._competitionService.getCompetition(competitionId),
      ),
    );

    return { match$, blueFencer$, redFencer$, pool$, competition$ };
  }

对于rxjs<5.5.2：

  getMatch(id: number) {
    const match$ = this._matchService.getMatch();

    const blueFencer$ = match$
      .flatMap(({ blueFencerId }) => this._matchService.getFencer(blueFencerId));

    const redFencer$ = match$
      .flatMap(({ redFencerId }) => this._matchService.getFencer(redFencerId));

    const pool$ = match$
      .flatMap(({ poolId }) => this._poolService.getPool(poolId));

    const competition$ = pool$
      .flatMap(({ competitionId }) =>
        this._competitionService.getCompetition(competitionId));

    return { match$, blueFencer$, redFencer$, pool$, competition$ };
  }

然后，在您的组件中，您可以订阅每个单独的流，并执行任何您想要的操作

编辑： 如果希望在

匹配服务

中创建流：

export class MatchService {
  match$ = this.getMatch();

  blueFencer$ = this.match$.pipe(
    flatMap(({ blueFencerId }) => this.getFencer(blueFencerId)),
  );

  redFencer$ = this.match$.pipe(
    flatMap(({ redFencerId }) => this.getFencer(redFencerId)),
  );

  pool$ = this.match$.pipe(
    flatMap(({ poolId }) => this._poolService.getPool(poolId)),
  );

  competition$ = this.pool$.pipe(
    flatMap(({ competitionId }) =>
      this._competitionService.getCompetition(competitionId),
    ),
  );

  constructor(
    private _poolService: PoolService,
    private _competitionService: CompetitionService,
  ) {}

  getMatch(id: number): Observable<any> {
    // ...
  }

  getFencer(id: number): Observable<any> {
    // ...
  }
}

导出类匹配服务{
match$=this.getMatch（）；
blueFencer$=此.match$.pipe(
flatMap（（{blueFencerId}）=>this.getFencer（blueFencerId）），
);
redFencer$=此.match$.pipe(
flatMap（（{redFencerId}）=>this.getFencer（redFencerId）），
);
池$=此.match$.pipe(
flatMap（（{poolId}）=>this.\u poolService.getPool（poolId）），
);
竞赛$=此.pool$.pipe(
平面图（{competitionId}）=>
此.\u competitionService.getCompetition（competitionId），
),
);
建造师(
专用池服务：池服务，
私人竞争服务：竞争服务，
) {}
getMatch（id:number）：可观察{
// ...
}
getFencer（id:编号）：可观察{
// ...
}
}

唯一一件事，这是挑剔的，因为我相信OP会找到答案：

pool$

调用

getFencer

，应该是

getPool

。感谢您的回复！你的代码在match.service中，对吗？我不完全理解这一行：const match$=this.\u matchService.getMatch（）；我已经编辑了我的问题，以显示match.service中包含流的解决方案

const match$=this.\u matchService.getMatch（）

match$

，存储对

.getMatch（）

方法返回的流的引用。我创建这个变量只是为了避免重复

这个所有的时间。你能考虑接受这个答案吗？创建代码示例需要很多时间，我认为这回答了问题。是的，绝对是。很抱歉经过一点尝试和错误，我使它工作起来了。非常感谢你的帮助！
  getMatch(id: number) {
    const match$ = this._matchService.getMatch();

    const blueFencer$ = match$.pipe(
      flatMap(({ blueFencerId }) => this._matchService.getFencer(blueFencerId)),
    );

    const redFencer$ = match$.pipe(
      flatMap(({ redFencerId }) => this._matchService.getFencer(redFencerId)),
    );

    const pool$ = match$.pipe(
      flatMap(({ poolId }) => this._poolService.getPool(poolId)),
    );

    const competition$ = pool$.pipe(
      flatMap(({ competitionId }) =>
        this._competitionService.getCompetition(competitionId),
      ),
    );

    return { match$, blueFencer$, redFencer$, pool$, competition$ };
  }

  getMatch(id: number) {
    const match$ = this._matchService.getMatch();

    const blueFencer$ = match$
      .flatMap(({ blueFencerId }) => this._matchService.getFencer(blueFencerId));

    const redFencer$ = match$
      .flatMap(({ redFencerId }) => this._matchService.getFencer(redFencerId));

    const pool$ = match$
      .flatMap(({ poolId }) => this._poolService.getPool(poolId));

    const competition$ = pool$
      .flatMap(({ competitionId }) =>
        this._competitionService.getCompetition(competitionId));

    return { match$, blueFencer$, redFencer$, pool$, competition$ };
  }

export class MatchService {
  match$ = this.getMatch();

  blueFencer$ = this.match$.pipe(
    flatMap(({ blueFencerId }) => this.getFencer(blueFencerId)),
  );

  redFencer$ = this.match$.pipe(
    flatMap(({ redFencerId }) => this.getFencer(redFencerId)),
  );

  pool$ = this.match$.pipe(
    flatMap(({ poolId }) => this._poolService.getPool(poolId)),
  );

  competition$ = this.pool$.pipe(
    flatMap(({ competitionId }) =>
      this._competitionService.getCompetition(competitionId),
    ),
  );

  constructor(
    private _poolService: PoolService,
    private _competitionService: CompetitionService,
  ) {}

  getMatch(id: number): Observable<any> {
    // ...
  }

  getFencer(id: number): Observable<any> {
    // ...
  }
}