角度-在模板中多次使用异步管道时可观察到...好习惯还是坏习惯? [英] Angular - Observable with async pipe used multiple times in template... Good Practice or Bad?
本文介绍了角度-在模板中多次使用异步管道时可观察到...好习惯还是坏习惯?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
例如:
<my-random-component[id]="(myObservable$ | async).id">
...
<my-random-component2[name]="(myObservable$ | async).name">
是像上面(我经常看到的)那样做更好,还是在.ts文件中订阅我的可观察对象,设置单个对象变量,然后绑定到该变量会更有效?后一种方法的想法是,可观察对象将只被调用一次。
问题:
- 是否每次通过|Async使用上述代码中的可观测对象时都会调用它?
- 编译器是否在幕后施展效率魔术,即使在我的模板中使用了10次w/,也只调用一次可观察对象?
- 哪种方法更好/首选?
谢谢!
推荐答案
使用异步管道可以更轻松地处理订阅。与组件中的订阅不同,它会自动处理取消订阅。
也就是说,有一个比示例显示的更好的模式。您可以通过两种不同的方式编写代码,而不是对组件进行多个异步调用。我假设这些组件位于相同的模板文件中:
<div *ngIf="(myObservable$ | async) as myObservable">
<my-random-component [id]="myObservable.id">
<my-random-component2 [name]="myObservable.name">
</div>
将代码包装在ngIf
中会做两件事:
- 减少重复代码
- 组件在
myObservable$
准备就绪之前不存在
如果您想每次都坚持调用异步呼叫,还有一个想法:
// COMPONENT
name$: Observable<string>;
id$: Observable<string>;
ngOnInit() {
// Return the exact value you want rather than the full object
this.name$ = OBSERVABLE_SOURCE
.pipe(
map(res => res.name)
);
this.id$ = OBSERVABLE_SOURCE
.pipe(
map(res => res.id)
);
}
// TEMPLATE
<my-random-component [id]="(id$ | async)">
<my-random-component2 [name]="(name$ | async)">
管道在没有订阅的情况下不会自动运行。您可以使用它映射、点击或执行任何其他操作,在您添加async/.subscribe()
之前,它不会运行。
这篇关于角度-在模板中多次使用异步管道时可观察到...好习惯还是坏习惯?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文