使用订阅与异步管道时，同一可观察对象的不同结果

提问者：小点点

我是一个业余爱好者，一年来一直在学习角。当试图开发一个自定义分页服务来从Firebase检索数据时，我想出了一个可观察的返回不同数组的方法，当使用异步管道或普通订阅时。

基本上，我的可观察对象使用扫描运算符来累积从Firebase获取的数据。它有2种方法：init获取第一个数据并使用初始数据设置可观察对象，addData获取更多数据。

启动服务并添加一些数据后，如果我再次启动它，如果使用正常订阅，它不会重置数据。但是如果使用异步管道，服务会按照预期重置数据。为什么订阅和异步管道在预期相同的情况下有不同的行为？

我在stackblitz中创建了错误的简化再现：

https://stackblitz.com/edit/angular-3vroi2

点击“重置数据”按钮时，订阅返回不重置。异步管道返回的相同数据相应重置。

目前，我已经在我的项目中使用异步管道，但仍然不明白为什么它们的工作方式不一样。希望有人能帮我弄清楚。

共1个答案

匿名用户

问题就出在这里：

 this.data = this._data.asObservable().pipe(
      scan( (acc, val) => {
        return acc.concat(val)
      }, []),
      shareReplay(1)
    )

此语句对已经订阅了this.data旧值的订阅者没有任何影响-例如您在child.组件中的手动订阅-他们将继续订阅旧值。

另一方面，您的异步管道正在订阅当时恰好存储在page.data中的任何值。

<li *ngFor="let item of page.data|async">{{item}}</li>

因此，当您将page.data设置为新的可观察值时，异步管道会取消订阅page.data的旧（可观察）值并订阅新的（可观察）值。