异步管道的正确方法

Question

我正在构建一个 Angular 应用程序，并尽可能使用async管道来处理 Observable 订阅。

我仍然完全确定何时以及为什么应该使用它，大多数时候我已经看到，如果我不需要对即将到来的数据进行任何更改，我可以使用它并将数据显示为-是； 但是如果我需要事先对任何数据进行处理，我应该手动订阅我的打字稿代码并在显示之前处理那里的所有内容。

因此，例如，如果我有一个对象数组并且我需要在对象的一个​​属性中操作一个字符串，那么最好手动订阅、处理响应然后在我的模板中显示它。

这个假设正确吗？

Answer 1

我在组件中使用了两种类型的 observables，这些是我的原因（可能还有其他我不知道的）：

使用订阅的 observable 的原因：

1. 手动控制订阅和取消订阅。
2. 在内部使用之前同步组件内数据的加载和操作。
3. 当订阅的数据在组件内部（非可视化）使用时，例如服务或计算。

使用异步可观察管道的原因：

1. 订阅和取消订阅 observable 的订阅是自动处理的。
2. 在 HTML 模板中使用之前同步组件内数据的加载和操作。
3. 当有许多 HTML 元素依赖于订阅的数据，并且您希望在组件销毁后自动释放订阅。

在这两种情况下，您都可以在使用前加载和操作组件内的订阅数据。

每个示例如下：

基于订阅

TS

someData: SomeClass[] = [
  { id: 1, desc: 'One', data: 100 },
  { id: 2, desc: 'Two', data: 200 },
  { id: 3, desc: 'Three', data: 300 }
];
someData$: Observable<SomeClass[]>;

this.someData$ = of(this.someData).subscribe((res) => {
  this.someData = res.map((r) => {
    r.data = Math.floor(r.data * 1.1);
    return r;
  });
});

异步可观察管道

TS

...
someData: SomeClass[] = [];
someData$: Subscription;

this.someData$ = of(this.someData).pipe(
  map((res) => {
    res.map((r) => {
      r.data = Math.floor(r.data * 1.1);
    });
    return res;
  })
);

HTML（对于两个选项）

<li *ngFor="let data of someData$ | async">
  Item={{ data.desc }}. Value={{ data.data }}
</li>

总而言之，任一选项的使用取决于您的组件的复杂性、它的类型（可视或非可视）以及您希望如何管理订阅的内存管理。

原始问题的答案是否定的，在涉及计算/预处理时手动订阅不一定更好。 你也可以使用异步管道来做同样的事情，就像我在上面两个等效的例子中展示的那样。