使用角度 2 加载多个子组件答案

【问题标题】：Load Multiple Child Components using angular 2使用角度 2 加载多个子组件
【发布时间】：2017-06-19 17:59:27
【问题描述】：

我有一个要求，我调用一个外部 API 来获取我的子组件的 Id 列表，对于每个 Id，我会使用另一个外部 API 来获取子组件的详细信息。

我在父组件中的 Angular 代码是这样的

 <div *ngFor="let link of result | objToArr">
        <details #Details [Id]="link.id"></details>
</div>

结果是我从第一个 API 校准得到的结果，在子组件中，上面的 [Id] 是一个输入变量。我在子组件的 ngInit 上调用 details API 调用。类似于

                this.Service.getDetails(this.apiBaseUrl, this.Id).subscribe(
                    res => {
                        this.result = res.json().detail;
                        this.units = this.result.unit;
                        this.meterIdonLoad = this.Id;
                    });

这在大多数情况下都有效，但是会同时发出多个调用来获取详细信息，并且浏览器将调用排队，导致整个页面加载的等待时间相当不可接受。以下是单次呼叫的网络物流。。

有没有更好的方法来提高页面的响应时间/重新设计页面？

通过邮递员单独调用 dtails 需要 50-80 毫秒，因此问题不在于 API 服务器。

非常感谢任何帮助。

【问题讨论】：

您必须同时显示所有详细信息吗？您可以在每次显示详细信息时触发调用并缓存结果。如果您必须同时显示它们，您可能会考虑将所有 link.id 值传递到单个端点并重构您的组件以迭代返回的数据。只是几个想法......总有选择。
是的，必须同时显示详细信息。我想我没有提到这些是网格中的项目。网格中的每个行项目都是一个子组件。从 API 发起多个调用比从 UI 发起多个调用更好？我可以在外部 API 上编写一个包装器，并将数据集与所有数据一起提供给 UI。您认为这会缩短加载时间吗？
我会一次获取所有数据，然后对其进行迭代。 Angular 在渲染数据方面非常快。如果 API 调用需要几秒钟的时间，您始终可以显示加载程序，让最终用户知道正在发生的事情以改善用户体验。
让我试一试:)。感谢您的帮助。
你打赌。总是乐于提供帮助。

标签： javascript performance angular angular2-services

【解决方案1】：

我认为你应该根据你的要求改变你的设计

1) 如果您的要求是在加载页面时拥有所有子详细信息，那么您的支持应该处理该操作。

2) 如果您的要求是，一旦用户开始滚动，您可以显示一些子详细信息和铰孔详细信息，而不是使用虚拟滚动 (https://github.com/rintoj/angular2-virtual-scroll)

3) 如果您需要在选择子组件后显示用户详细信息，而不是在选择操作后触发每个单独的请求。

【讨论】：