Angular - 在模板中多次使用异步管道时可观察到......好的做法还是坏的？

Question

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

例如：

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

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

问题：

1. 上述代码中的 observable 是否在每次通过 | 使用时都会被调用？异步？
2. 即使在我的模板中使用了 10 次，编译器是否会在后台执行任何效率魔法以仅调用可观察对象一次？
3. 哪种方法更好/首选？

谢谢！

Answer 1

另一种方法是将结构和内容呈现职责分开，而不受*ngIf的约束。

您可以将ng-template 和ng-container 与上下文一起使用：

<ng-template #userTemplate let-user>
  <user-address [zipCode]="user?.zipCode"></user-address>
  <user-car [carCode]="user?.carCode"></user-car>
</ng-template>

<ng-container
  *ngTemplateOutlet="
    userTemplate;
    context: { $implicit: user$ | async }
  "
>
</ng-container>

Answer 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()之前它不会运行。

Answer 3

如果您有多个可观察对象，您可以将整个页面包装在一个 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 4

您可以使用share() 来使用相同的可观察对象并从html 中多次调用它。像这样：

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

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