与Angular中的组件属性相比，使用异步绑定进行映射的优势

Question

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

以下是两个选项的示例。

1. 映射到组件属性

// 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>

2. 映射到异步绑定

// 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>

Answer 1

异步管道方法

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

1. 当我们将Onpush更改检测策略与状态管理库一起使用时，我们会使用此设计，因为更改检测在我们获得全新对象时有效。

2. 它自动订阅和取消订阅组件销毁的可观察或承诺。

3. 更干净、更可读，因为视图中可以有大量的异步子。

订阅方法

1. 在这里，您必须手动取消订阅，使用take将取消订阅可观察对象，但如果您需要来自该可观察对象的更多数据(它限制了数据流(，该怎么办。

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

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

注意：async管道方法需要获得传递给它的数据对象的新引用，以便运行更改检测和更新视图。