Angular中如何获取Behavior Subject/ReplaySubject的所有历史值？

问题根源 #

你当前接收组件里用this.Type = type直接覆盖变量，所以不管发送多少个值，最终只会保留最后一个。要收集所有不同的Type，需要用数组存储，同时处理去重。另外你的服务代码里有个笔误：emitType方法里调用的是this.emitType$.next(type)，但你的Subject实例是Type$，这会导致报错，先修正这个问题。

步骤1：修正共享服务代码 #

如果需要保留所有发送过的值，用ReplaySubject并设置无限缓存（或按需设置缓存数量），同时修正方法里的Subject引用：

// service.ts
import { Injectable } from '@angular/core';
import { ReplaySubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class YourSharedService {
  private Type$ = new ReplaySubject<any>(Number.POSITIVE_INFINITY); // 缓存所有发送过的值

  getType(): Observable<any> {
    return this.Type$.asObservable();
  }

  emitType(type: any | null): void {
    this.Type$.next(type); // 修正笔误，指向正确的Subject实例
  }
}

步骤2：接收组件修改为数组存储并处理去重 #

将接收组件里的单个Type变量改为数组，然后在订阅时判断新值是否已存在，不存在则添加：

// 接收组件 component.ts
import { Component, OnInit } from '@angular/core';
import { YourSharedService } from './path-to-your-service';
import { distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-receiver',
  templateUrl: './receiver.component.html'
})
export class ReceiverComponent implements OnInit {
  types: any[] = []; // 用数组存储所有不同的Type值

  constructor(private service: YourSharedService) {}

  ngOnInit(): void {
    this.service.getType().pipe(
      distinctUntilChanged() // 可选：防止重复发送相同Type时重复触发
    ).subscribe((type: any) => {
      // 过滤null值，并判断Type是否已存在
      if (type && !this.types.includes(type)) {
        this.types.push(type);
        // 这里可以针对新添加的Type执行对应操作
        this.handleTypeOperation(type);
      }
      console.log('所有不同的Type值:', this.types);
    });
  }

  // 示例：根据不同Type执行操作
  private handleTypeOperation(type: any): void {
    switch(type) {
      case 'type1':
        // 执行type1的逻辑
        break;
      case 'type2':
        // 执行type2的逻辑
        break;
      default:
        // 默认逻辑
    }
  }
}

进阶：用RxJS操作符在流中直接收集数组 #

如果想更响应式地处理，可以用scan操作符在数据流中直接维护去重后的数组：

// 接收组件 ngOnInit 替换为
this.service.getType().pipe(
  distinctUntilChanged(),
  scan((acc, current) => {
    if (current && !acc.includes(current)) {
      return [...acc, current];
    }
    return acc;
  }, [] as any[])
).subscribe((allTypes) => {
  this.types = allTypes;
  console.log('所有不同的Type值:', this.types);
  // 每次数组更新后可以统一处理所有类型的逻辑
});

内容的提问来源于stack exchange，提问作者Aayush Mohta