角2:推迟组件呈现，直到服务异步初始化。

Question

我有一个角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>

这只是一种方法。您可以使用安全导航操作符(?)进行较小的操作，但是由于您没有向提供任何有关代码的信息，所以我给出了一个通用的答案。