Question

我有一个Angular 2应用程序，我希望尽可能保持精简（流量方面）并仅在需要时加载某些数据集（来自API URL）。

负责加载数据的服务作为依赖项传递给ui组件构造函数。组件模板有许多对服务属性和方法的引用。我可以在构造函数中启动数据加载，但由于加载是异步发生的，因此在数据到达时已经呈现了组件。

所以，基本上，我正在寻找一种方法来推迟组件呈现，直到使用从API加载的新数据初始化服务。目前我有一个基本路由，其中包含检查服务是否已初始化的组件，并在完成初始化后导航到最终路由。但这并不漂亮，因为一个视图需要两条路线。

Answer 1

你可以做这样的事情;

让我们假设您从异步调用中获取数据，如下所示：

this.myService.myAsyncCall().subscribe((res)=>{...})

在此异步调用中，可以说您正在将响应分配给组件的字段

this.myService.myAsyncCall().subscribe((res)=>{
    this.field = res.data.list;
})

并且您不希望在此数据到达之前呈现您的模板，因此您可以在模板中使用*ngIf：

<div *ngIf="field && field.length && field.length > 0">
  ...
</div>

这只是一种方法。您可以使用安全导航操作符（?）进行较小的操作，但由于您未提供有关代码的任何信息，因此我给出了一般答案。