Angular中加载新组件时如何避免监听Subject的最后一次发射值？

这个问题的核心在于你使用的Subject类型（大概率是BehaviorSubject）的特性——它会缓存最新的发射值，新订阅者一订阅就会立即收到这个缓存值。如果想让新路由只接收订阅之后的新值，可以试试下面几种方案：

方案1：改用普通Subject #

如果你的业务场景不需要初始值，直接把服务里的BehaviorSubject换成普通Subject即可。普通Subject不会缓存历史值，只有在订阅之后发射的值才会被订阅者接收：

// 共享服务中的代码
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MySharedService {
  private mySubject = new Subject<any>();
  public myObservable$ = this.mySubject.asObservable();

  updateValue(newValue: any) {
    this.mySubject.next(newValue);
  }
}

这样新路由在ngOnInit中订阅myObservable$时，只会收到订阅之后通过updateValue发射的新值，不会获取到前一个路由设置的最后一次值。

方案2：用skip(1)跳过缓存值（适用于必须保留BehaviorSubject的场景） #

如果你因为需要初始值等原因必须使用BehaviorSubject，可以在新路由的订阅逻辑里添加skip(1)操作符，跳过第一次订阅时收到的缓存值：

// 新路由组件的ngOnInit方法
import { skip } from 'rxjs/operators';

ngOnInit() {
  this.mySharedService.myObservable$
    .pipe(skip(1))
    .subscribe(value => {
      // 这里只会处理订阅之后发射的新值，不会收到前一个路由留下的最后一次值
    });
}

⚠️ 注意：如果BehaviorSubject的初始值你也需要接收，那这个方法可能不适用——它会跳过所有缓存的最新值（包括初始值）。这种情况下可以考虑在服务里额外维护一个状态，或者在第一个路由的ngOnDestroy里调用mySubject.next(初始值)来重置缓存。

方案3：使用ReplaySubject(0) #

ReplaySubject可以设置缓存的数量，设置为0时就和普通Subject的行为一致，不会缓存任何历史值：

// 共享服务中的代码
import { ReplaySubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MySharedService {
  private mySubject = new ReplaySubject<any>(0);
  public myObservable$ = this.mySubject.asObservable();

  updateValue(newValue: any) {
    this.mySubject.next(newValue);
  }
}

这个方案和普通Subject效果类似，但如果之后有需要调整缓存数量的场景，会更灵活。

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