Angular 6 router.events.filter报错：Property 'filter'不存在，求正确写法

你碰到的这个问题，核心原因是Angular 6配套的RxJS版本升级到了6.x，这个版本对操作符的使用逻辑做了关键调整——原来直接在Observable对象上链式调用的操作符（比如.filter()），现在必须通过pipe()方法包裹后才能使用。

正确的代码写法： #

import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
...
constructor(private router: Router) {}

// 用pipe包裹filter操作符
this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
).subscribe((res) => {
  // 这里编写你的业务逻辑
});

补充说明： #

在RxJS 5及更早版本中，操作符是挂载在Observable原型链上的，所以可以直接链式调用.filter()这类方法。但RxJS 6为了优化打包体积（支持Tree Shaking），改用了pipeable操作符模式：所有操作符都需要从rxjs/operators导入，然后通过Observable.pipe()方法来组合使用。

你已经正确导入了filter操作符，只需要把它放到pipe()方法里，就能解决这个语法错误了。

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