Question

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

例如：

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

...我最好像上面那样做（我看到很多），或者在.ts文件中订阅我的可观察对象，设置单个对象变量然后绑定到那？后一种方法的想法是，可观察对象将仅被调用一次。

问题：

每次通过|使用上述代码中的observable时，是否都会调用它？异步？
即使在模板中使用了10次，编译器是否在幕后做任何效率魔术，只调用一次可观察对象？
哪种方法更好/更好？

谢谢！

Answer 1

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

<div *ngIf="{
  observable1: myObservable1$ | async,
  observable2: myObservable2$ | async
} as data">
  ... page content
  {{data.observable1.id}}: {{data.observable1.name}}

  {{data.observable2.status}}

</div>

注意：* ngIf =“ {}”始终为真

贷方转到： https://medium.com/@ofirrifo/extract-multiple-observables-with-the-async-pipe-in-angular-b119d22f8e05

Answer 2

您可以只使用 share() 来使用相同的 observable 并从 html 多次调用它。像这样：

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

那么无论你从 HTML 中调用 observable 多少次，它只会被调用一次。

Answer 3

使用异步管道使处理订阅变得更加容易。与组件中的订阅不同，它可以自动处理取消订阅。

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

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

包装ngIf中的代码有两件事：

它减少了重复的代码
在myObservable$准备就绪之前，组件不存在

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

// 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()后，它才能运行。

角度-可以在模板中多次使用异步管道来观察...好的做法还是不好的做法？

3 个答案: