Angular 2：延迟组件渲染，直到服务异步初始化

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>

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