从RxJS5升级至RxJS6：如何将这段RxJS5代码改写为RxJS6版本？

嘿，这个问题在RxJS版本升级时超常见，我来帮你把这段代码改成RxJS6兼容的版本：

第一步：导入正确的操作符 #

RxJS6把所有可管道操作符都集中到了rxjs/operators模块下，所以你需要先导入用到的操作符：

import { distinctUntilChanged, combineLatest, switchMap } from 'rxjs/operators';

第二步：改写数据流逻辑 #

RxJS6放弃了原型链式调用操作符的方式，改用pipe()方法来串联所有操作符，这样既避免了全局原型污染，也让代码结构更清晰。改写后的代码如下：

this.searchTerm$
  .pipe(
    // 保留原有的去重逻辑
    distinctUntilChanged(),
    // 组合selectedLg$的数据流，同时对它也做去重
    combineLatest(
      this.selectedLg$.pipe(distinctUntilChanged()),
      (_term, _lg) => ({ term: _term, lg: _lg })
    ),
    // 切换到搜索服务的数据流
    switchMap(t => this.service.search(t.lg, t.term))
  )
  .subscribe((results: any[]) => {
    this.list = results;
  });

关键改动说明 #

• 操作符调用方式：所有原来的链式操作符（比如.distinctUntilChanged()）都要放到pipe()内部作为参数传递。
• combineLatest的用法：作为实例操作符时，现在需要放在pipe()里，第一个参数是要组合的Observable，第二个参数是投影函数，逻辑和RxJS5完全一致。
• 保持原有行为：我们对selectedLg$也用pipe(distinctUntilChanged())包裹，确保和原代码的去重逻辑完全匹配。

这样改完之后，代码就能在RxJS6环境下正常运行了！

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