使用异步绑定映射与 Angular 中的组件属性的优势？

Posted 2023-02-19

【中文标题】使用异步绑定映射与 Angular 中的组件属性的优势？

【英文标题】：Advantage of mapping with a async binding vs a component property in Angular?

【发布时间】：2022-01-09 13:13:10

【问题描述】：

当我的服务调用返回我的 html 页面的数据时，使用异步绑定与仅映射到具体对象有什么优势或好处？

这是两个选项的示例。

映射到组件属性

// component
event: any;

// ngOnInit()
this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => 
  this.event = response;
, error => 
  console.log(error);
);

// service
getEvent(id: number): Observable<any> 
  return this.http.get<any>(this.baseUrl + 'events/' + id);

<div>event.title</div>
<div>event.date</div>

映射到异步绑定

// component
event$: Observable<any> = of (undefined);

// ngOnInit
this.event$ = this.eventService.getEvent(this.id).pipe(take(1),
  catchError(error => 
    console.log(error);
    return throwError(error);
  ));

// service
getEvent(id: number): Observable<any> 
  return this.http.get<any>(this.baseUrl + 'events/' + id);

<div>(event$ | async).title</div>
<div>(event$ | async).date</div>

【参考方案1】：

异步管道方法

异步管道订阅 Observable 或 Promise 并返回它发出的最新值。当发出新值时，异步管道会标记要检查更改的组件。当组件被销毁时，异步管道会自动取消订阅以避免潜在的内存泄漏。当表达式的引用发生变化时，异步管道会自动取消订阅旧的 Observable 或 Promise 并订阅新的。

当我们将Onpush 变化检测策略与状态管理库一起使用时，我们会使用这种设计，因为当我们获得一个全新的对象时，变化检测就会起作用。

它在组件销毁时自动订阅和取消订阅 observable 或 promise。

更简洁，更易读，因为您可以在视图中拥有多个异步子。

订阅方法

这里你必须手动取消订阅，使用 take 会取消订阅 observable，但是如果你需要更多来自 observable 的数据怎么办（它限制了数据流）。

此方法的主要优点是您可以在接收数据时运行您的逻辑，并且可以在组件中的多个位置使用该数据。

我们根据场景使用了这两种模式，非常适合特定情况。

注意：async pipe 方法需要获取传递给它的数据对象的新引用才能运行更改检测并更新视图。

【讨论】：

嗨阿普尔瓦。在我的场景中，我只在页面加载时获取此数据一次。根据您的解释，第一个场景（订阅场景）似乎合适？

您希望您的组件在视图中显示多长时间？如果您仅使用它来获取数据，您可以使用 Promise?您的工作不需要流。但是为了保持一致，您可以使用 subscribe 和 take(1)，它适合您的场景。

嗨阿普尔瓦。 “您希望您的组件在视图中显示多长时间？”是什么意思？