Angular 5个可链接API调用，以获取进度报告给UI的巨大对象

我正在从事Angular 5项目，当从服务器获取一个巨大的对象时，它需要快速响应。为了让应用程序运行得更快，对象[Word Document]被分解为主要组件[Word Pages]。在主要组件内部，有一个路由器出口，用于加载子组件[段落]

我已经给出了一个大对象作为word文档的示例，其中包含页面和段落。由于从不同系统获取这些数据的复杂性，以及这些对象的重量，我决定将这些小部分组成名为BCA的主对象

当用户导航到BCA/：id/home/summary时，将加载摘要子组件的数据。同时，在后台运行一系列API调用，以获取构成主BCA对象的其他部分[主页/日期、主页/加载、审核/摘要等]

用户不必等到获取整个对象，并且在获取is对象时，他可以立即看到结果

我面临的问题是如何触发一系列可以并行运行的API调用，并将其进度报告给UI。因此，用户将知道给定的选项卡或子组件已加载并准备好查看。有能力取消整个链，如果用户导航离开

不确定Observable是否有帮助，我如何运行这个链表来报告它的状态并取消整个列表，使用什么操作符，以及是否有任何外部示例演示了相同的场景

---

感谢您的帮助。

通常我认为人们应该带着他们尝试过的东西来，并就他们收到的错误提出问题，但我将给出一个简单的示例，它不一定能够复制/粘贴，因此您可以将其作为学习示例来实现您自己的逻辑

以下是你如何

• 提出一系列并行请求
• 每个都有自己的装载指示器
• 在模板的子组件中使用来自每个并行请求的数据
• 显示模板中每个请求的加载指示器
• 如果用户离开组件，则取消所有挂起的请求

我将使用一种简单、丑陋和务实的方法来使用旗帜；如果你愿意的话，你可以让它更漂亮，更可重复使用

import { Component, OnInit, OnDestroy } from '@angular/core';

import { forkJoin } from 'rxjs/observable/forkJoin';
import { finalize } from 'rxjs/operators';

import { MyService } from 'services';

export class MyComponent implements OnInit, OnDestroy {
    foo: any;
    loadingFoo: boolean = true;

    bar: any;
    loadingBar: boolean = true;

    baz: any;
    loadingBaz: boolean = true;

    constructor(private myService: MyService) {}

    ngOnInit() {
        this.sub = forkJoin([
            this.myService.getFoo().pipe(
                finalize(() => this.loadingFoo = false)
            ),
            this.myService.getBar().pipe(
                finalize(() => this.loadingBar = false)
            ),
            this.myService.getBaz().pipe(
                finalize(() => this.loadingBaz = false)
            )
        ]).subscribe((responses: any[][]) => {
            this.foo = responses[0];
            this.bar = responses[1];
            this.baz = responses[2];
        })
    }

    ngOnDestroy() {
        if (this.sub) {
            this.sub.unsubscribe();
        }
    }
}

模板可以如下所示：

<ng-container *ngIf="loadingFoo">
    <loader></loader>
</ng-container>
<ng-container *ngIf="!loadingFoo">
    <foo-component [foo]="foo"></foo-component>
</ng-container>

<ng-container *ngIf="loadingBar">
    <loader></loader>
</ng-container>
<ng-container *ngIf="!loadingBar">
    <bar-component [bar]="bar"></bar-component>
</ng-container>

<ng-container *ngIf="loadingBaz">
    <loader></loader>
</ng-container>
<ng-container *ngIf="!loadingBaz">
    <baz-component [baz]="baz"></baz-component>
</ng-container>