角度:如何最好地处理初始化/加载问题

Question

假设我从服务中读取了 Angular 组件构造函数中的一些数据(例如，为我处理 REST 的服务(。

export class MyComponent
{
public data : any;
constructor (private ws : MyWebService)
{
this.ws.getData ().subscribe  // e.g. HTTP-request
(
(resp) => 
{
this.data = resp;
}
);
}
}

模板只会显示该数据。

<div>{{ data }}</div>

由于在渲染组件之前未加载数据，因此在第一次加载时，我总是会在javascript控制台中收到未定义的错误。

为了避免错误，我可以在显示之前检查数据。

<div *ngIf="data!=undefined">{{ data }}</div>

另一种方法是初始化数据并希望获取速度很快。

有没有更好的策略来避免这个问题？

Answer 1

有很多策略：

1. 为安全的成员访问执行{{ data?.memberOfData }}。

2. 仅当数据未undefined时才执行<div *ngIf="data">{{ data }}</div>以呈现div

在

3. 数据加载时放置加载栏。您可以在 HttpInterceptor 中执行此操作以使其在应用程序范围内，或者仅在您正在处理的组件中执行此操作。

4. 使用解析防护，这将阻止加载router-outlet中的组件，除非数据已加载。

5. 您也可以使用async管道：

   this.data$ = this.ws.getData();

然后在模板中：

<div> {{ data$ | async | json }} </div>

我个人喜欢最后一个(第 5 个(，因为我们不必关心unsubscribengOnDestroy中的Subscription以避免任何内存泄漏。它更干净一点。

不过，这完全取决于您的特定用例。没有好方法或坏方法。