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

Question

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

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

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

结果是我从第一个API cal得到的结果，在子组件中，上面的[Id]是一个Input变量。我在子组件的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;
                    });

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

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

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

非常感谢任何帮助。

Answer 1

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

1）如果您的要求在加载页面时具有所有子详细信息，则应由您的后台处理该操作。

2）如果您的要求是，您可以在用户开始滚动时显示一些子详细信息和扩展详细信息，而不是使用虚拟滚动（https://github.com/rintoj/angular2-virtual-scroll）

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