javascript - 使用 Angular 2 加载多个子组件

Question

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

我在父组件中的 Angular 代码如下所示

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

结果是我从第一个 API cal 获得的结果，在子组件中，上面的 [Id] 是一个输入变量。我在子组件的 ngInit 上调用详细 API 调用。类似的东西

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

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

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

通过 postman 对 dtails 进行的单独调用需要 50-80 毫秒，因此问题不在于 API 服务器。

非常感谢任何帮助。

Answer 1

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

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

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

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