Question

当我需要在Angular组件中访问数据时，从可观察流访问数据的最佳方法是什么？我知道我可以在模板中使用异步管道，但是我需要访问实际组件中的数据。

到目前为止，我已经通过点击或订阅将数据提取到了一个新变量中，但是我只是想知道是否缺少一种更简单或更简洁的方法。如果没有，在点击和订阅之间是否有首选方法？

//assume db.getBook() returns an observable with a book object
this.subscription = db.getBook("153").pipe(   
   tap(book => this.book = book).subscribe()

//or

this.subscription = db.getBook("153").subscribe(book => this.book = book)

Answer 1

.pipe方法用于链接可观察的运算符，您将始终获取发出的数据。另外，管道方法允许webpack从最终的JavaScript包中删除未使用的运算符。这样可以更轻松地构建较小的文件。

.tap透明地执行操作或副作用，例如日志记录。它不会修改流。

.subscribe仅被调用一次，用于订阅可观察的响应。此外，我们可以将响应放入一些变量中以将其显示在视图中。

最好使用async管道作为模板：

<option *ngFor="let item of items$ | async">
     {{ item?.name }}
</option>

要从后端分配数据，可以使用subscribe()方法：

this.yourService.getYourData()
    .subscribe(val => 
       this.items = val
    );

The comment of source code of tap() method says:

此运算符可用于调试Observable以获取正确的   值或执行其他副作用。

注意：这与Observable上的subscribe不同。如果   tap返回的Observable未订阅，副作用   由观察者指定的将永远不会发生。 tap因此简单   监视现有执行，它不会触发执行   像subscribe一样发生。

因此，最好使用subscribe方法分配数据，因为：

您最终的JavaScript包将更加轻巧，并且没有tap方法
如果未订阅tap返回的Observable，则会产生副作用由观察者指定的将永远不会发生。因此，无论如何，您都需要调用subscribe方法。因此，如果您只想分配数据，则无需使用tap方法

如何从可观察的流中获取数据

1 个答案: