Angular 角度-可在模板中多次使用异步管道进行观察。。。好习惯还是坏习惯？

如果我需要在我的组件模板中绑定来自同一个可观察对象的多个属性

例如：

<my-random-component[id]="(myObservable$ | async).id">
...
<my-random-component2[name]="(myObservable$ | async).name">

...

…我是像上面那样做更好（我经常看到），还是在.ts文件中订阅我的observable，设置单个对象变量，然后绑定到该变量更有效？后一种方法的思想是，可观察对象只会被调用一次

问题:

上述代码中的可观察对象是否每次通过| async使用时都会被调用

即使在我的模板中使用了10次，编译器在幕后是否有效率魔法只调用可观察对象一次

哪种方法更好/更可取

---

谢谢

使用异步管道可以更轻松地处理订阅。与在组件中订阅不同，它会自动处理取消订阅

也就是说，有一个比示例所示更好的模式。您可以用两种不同的方式编写它，而不是对组件进行多个异步调用。我假设这些组件位于同一个模板文件中：

在

ngIf

中包装代码有两件事：

• 它减少了重复代码
• 在准备好

  myObservable$

  之前，组件不存在

如果您想坚持每次调用async，还有一个想法：

//组件
name$：可观察的；
id$：可观察的；
恩戈尼尼特（）{
//返回所需的确切值，而不是完整对象
this.name$=可观察的\u源
.烟斗(
映射（res=>res.name）
);
this.id$=可观察的\u源
.烟斗(
映射（res=>res.id）
);
}

//模板

---

没有订阅，管道不会自动运行。您可以使用它映射、点击或执行任何其他操作，并且在添加

async/.subscribe（）

之前，它不会运行。如果您有多个观察对象，您可以将整个页面包装在一个div中，该div将所有观察对象收集到一个数据对象中，然后根据需要使用它们：

... 页面内容
{{data.observe1.id}:{{data.observe1.name}
{{data.observe2.status}

注意：

*ngIf=“{…}”

始终为真

归功于：

---

您可以使用

share（）

来使用同一个可观察对象，并从html中多次调用它。像这样：

this.myObservable$ = this.anotherObservable$.pipe(share());

---

然后，无论您从HTML调用observable多少次，它都只被调用一次。

这可能会以基于意见的方式关闭，但我也很好奇：）不幸。。。我真的认为这是个好问题。它们要么是相同的，要么是更有效的（我会认为）。这些都是好主意，谢谢你花时间回复。我没有想到第一个选择。我仍然在想，仅仅订阅一次是否是更好的方式。我真的不介意sub/unsub的“模式”。我发现这是一个很好的开始方式，即使是一个可观察到的，因为在你知道它之前，你往往会有多个可观察到的，然后你不需要重构第一个可观察到的使用。我使用

sharedReplay（）

来管理它。不要问我为什么我们的代码试图使用这种方法，在这种方法中，我们使用相同的observable传递给多个子组件。尽管

.pipe（share（）），HTML中的第一个组件似乎是唯一接收数据的组件正在使用中。可能是我们用错了我们只是将异步管道重构为一个
父级，所以我们只订阅了一次。@AlexandreAnnic shareReplay（）确切地说。对我也有用。