Angular 6.x中Observable<Data>结合ActivatedRoute时Map操作符不存在问题

嘿，这个问题我升级Angular的时候也踩过坑！根源是Angular 6配套的RxJS 6+彻底改变了操作符的使用方式，和你之前用的RxJS 5写法完全不兼容了，所以那些旧的导入方式自然不管用。

问题原因 #

RxJS 6+废弃了直接在Observable实例上链式调用操作符（比如.map()）的写法，所有操作符必须通过pipe()方法来组合使用，同时导入路径也统一到了rxjs/operators。

正确解决步骤 #

1. 清理无效导入，保留正确的操作符导入
   只需要保留这一行导入即可，其他旧的导入都可以删掉：

   import { map } from "rxjs/operators";
   

2. 修改组件代码，用pipe()包裹map操作符
   把你原来的ngOnInit代码改成这样：

   ngOnInit() {
     this.route.data.pipe(
       map(data => data.title)
     ).subscribe(title => console.log(title));
   }
   

   如果你喜欢更简洁的写法，还可以用对象解构直接提取title：

   ngOnInit() {
     this.route.data.pipe(
       map(({ title }) => title)
     ).subscribe(title => console.log(title));
   }
   

为什么旧方法无效？ #

• import 'rxjs/add/operator/map'是RxJS 5的“补丁式”导入写法，RxJS 6已经完全移除了这种方式；
• 直接调用.map()的链式写法在RxJS 6中不再支持，必须通过pipe()来传递操作符。

这样修改后，编译错误应该就会消失，功能也能恢复到升级前的状态啦！

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