使用RxJS推荐的操作符导入方式调用share时遇到问题

嘿，我太懂你踩的这个坑了——RxJS从v5.5版本开始推pipeable操作符，和之前的原型链扩展模式确实有不小的差异，刚开始切换很容易摸不清门道。

首先要明确：你用import { share } from 'rxjs/operators';这个导入方式完全是对的，这就是官方现在最推荐的做法。问题出在你调用share的姿势上：

为什么旧方式能运行？ #

旧的import 'rxjs/add/operator/share';是把share方法挂载到了Observable的原型链上，所以你可以直接在Observable实例后面链式调用.share()。但这种方式现在已经被废弃了，因为它会强制引入整个操作符模块，不利于代码打包时的树摇（tree-shaking），会增加最终打包体积。

新方式的正确调用姿势 #

新的pipeable操作符是纯函数，不能直接把Observable当作参数传给它们，而是需要通过Observable实例的pipe()方法来传递这些操作符。你原来的代码：

public currentUser: Observable<User> = share(this.currentUser$.asObservable());

要改成这样：

public currentUser: Observable<User> = this.currentUser$.asObservable().pipe(share());

拓展：多操作符组合的写法 #

如果之后你需要叠加更多操作符（比如map、filter），只需要把它们按顺序放进pipe()的参数里就行，逻辑非常清晰：

import { share, map, filter } from 'rxjs/operators';

// 示例：过滤非空用户并提取用户名
public currentUserName: Observable<string> = this.currentUser$.asObservable()
  .pipe(
    filter(user => !!user),
    map(user => user.name),
    share()
  );

简单来说：pipeable操作符不能直接“包裹”Observable使用，而是要把它们作为参数传给Observable的pipe()方法，让操作符按顺序处理数据流就好啦。

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