Angular调用函数时如何清空Observable中scan操作符的累加值

问题确实出在scan操作符的内部累加器，它会在流存活期间一直保存之前的累积值，之前传空数组的操作不生效的原因也很简单：当前的scan逻辑是不管接收到什么值，都会往已有的累加结果后面拼接新数组，传[]进去就相当于[...旧数据, ...[]]，最终还是旧数据，自然没有清空效果。

方案1：给scan增加重置逻辑 #

改动最小的实现方式，是修改scan的回调，约定一个特殊的重置信号（比如null），接收到信号时直接清空累加器：

this.awsOwners$ = this.awsOwners.asObservable().pipe(
  scan((acc, curr) => {
    // 接收到null时重置累加器
    if (curr === null) return []
    return [...acc, ...curr]
  }, [])
);

之后切换selectedPlatform需要清空数据时，不要传空数组，改为传null即可：

// 切换平台时先执行重置
this.awsOwners.next(null);
// 再调用接口拉取新平台的第一页数据
this.getAwsOwners(0);

方案2：用switchMap在切换平台时重建累加流 #

更符合响应式编程规范的实现，每次切换平台时直接生成新的累加流，旧流的累加器会直接被销毁，天然不会有旧数据留存的问题：

1. 先声明一个平台变化的触发Subject

platformChange$ = new Subject<string>();

2. 在所有修改selectedPlatform的逻辑处，新增触发代码：

this.selectedPlatform = 新的平台值;
this.platformChange$.next(this.selectedPlatform);

3. 改写awsOwners$的定义：

this.awsOwners$ = this.platformChange$.pipe(
  // 每次平台变化时切换成新的累加流，旧流自动销毁
  switchMap(() => this.awsOwners.asObservable().pipe(
    scan((acc, curr) => [...acc, ...curr], [])
  ))
);

两种方案都可以解决需求，方案1改动量更小，方案2逻辑更干净，不会出现遗忘触发重置的问题。

内容的提问来源于stack exchange，提问作者Rishav Tandon