typescript 如何处理Angular组件中的异步初始化数据？

mrzz3bfm 于 2023-08-07 发布在 TypeScript

关注(0)|答案(2)|浏览(172)

加载组件所需的数据是通过首先阅读ActivatedRoute.queryParams，然后进行一些API调用来检索的。由于ngOnInit内部的异步构造函数和异步调用都无法延迟组件的初始化，因此在我的组件内部，我必须假设我的数据是未定义的，这导致了许多繁琐的if情况。
解决这个问题的一种方法是不使用this.data，而是让我的类方法将数据作为参数。通过在模板根上执行一次*ngIf="data != null"检查，传递非未定义数据不再需要空值检查。
但我想这并不是类字段的真正使用方式。那么，处理异步初始化的组件数据的推荐方法是什么？
例如，我在考虑一些ready标志，并告诉typescript如果ready是true，则data不是undefined。但我真的不知道如何实现这一点。

typescript

来源：https://stackoverflow.com/questions/76841802/how-to-deal-with-async-initialized-data-in-angular-component

2条答案

按热度按时间

67up9zun1#

我认为这篇文章可以帮助你。
这篇文章是关于angular 13的，但应该在较旧/较新的版本中也能工作。
在angular 13中，我如何在渲染页面之前获取所有API数据？“
https://royeraadames.medium.com/in-angular-13-how-can-i-get-all-api-data-before-rendering-the-page-93ee045b9c09
让我知道如果这是有用的，或者你需要更多的帮助！

赞(0）回复(0）举报 2023-08-07

hgb9j2n62#

所以你有两个异步流-API调用和queryParams。您需要将两者结合起来，并在两者都发出时获得结果。这可以通过RxJS轻松实现：

combineLatest([this.activatedRoute.queryParams, this.api.getData$()])
  .pipe(take(1)) // take(1) completes the observable after 1 emit
  .subscribe(([params, data]) => {
    // TODO implement initialisation logic
  });

字符串
在这个例子中，我们假设this.api.getData$()是返回Observable的API调用。如果需要在模板中显示这些数据或将其传递给某个子组件（使用async管道），可以使用Observable而不是subscribe。举例来说：

this.data$ = combineLatest([this.activatedRoute.queryParams, this.api.getData$()]).pipe(
  map(([params, data]) => {
    // TODO process the data
  })
);

型

赞(0）回复(0）举报 2023-08-07

我来回答

typescript 如何处理Angular组件中的异步初始化数据？

2条答案

相关问题

热门标签

最新问答