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

我有一个要求，我调用外部API来获取我的子组件的ID列表，并为每个ID，我出去另一个外部API来获取子的细节。使用角度加载多个子组件2

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

<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; 
        });

这适用于大多数情况，但也有多个呼叫走出去的同时，以获取详细信息和浏览器的排队造成了相当不可接受的等待期为整个页面调用加载。以下是一次通话的网络物流。。

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

通过邮递员个人调用的dtails需要50-80毫秒的任何地方，所以问题不在API服务器。

任何帮助，非常感谢。

来源

2017-06-19 Vish

你是否必须同时显示所有的细节？每次显示详细信息时都可以发出呼叫并缓存结果。如果您必须同时显示所有这些数据，则可以考虑将所有'link.id'值传递到单个端点，并重构您的组件以迭代返回的数据。只是一些想法......总有选择。 – Brandon

是的，必须同时显示细节。我想我没有提及这些是网格中的项目。网格中的每个订单项都是一个子组件。从API调用多个调用最终能够更好地实现来自UI的多个调用？我可以在外部API上编写一个封装器，并将数据集用所有数据提供给UI。你认为这会改善加载时间吗？ – Vish

我会一次获取所有数据，然后遍历它。角度在渲染数据方面速度非常快。如果API调用需要几秒钟，您可以始终显示加载程序以让最终用户知道正在进行的操作以改善用户体验。 – Brandon

我想你应该根据你的要求

1）改变你的设计，如果你的要求是拥有所有孩子的细节，而不是你的支持装载页面应该处理的操作。

2）如果你的要求是，你可以展示一些孩子的细节和扩孔细节一旦用户开始滚动比你可以使用虚拟滚动（https://github.com/rintoj/angular2-virtual-scroll）

3）如果你的要求，你需要说明如何选择孩子之后用户详细组件，而不是在选择操作后可以触发每个单独的请求。

来源

2017-06-19 18:12:14 CharanRoot

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

回答

相关问题