类型“Observable”上不存在属性“filter”

Question

嗨，我正在使用Angular 2 final和router 3.0。我想过滤从中发出的事件。路由器。事件

我想做的是：

import 'rxjs/operator/filter';

//...

this.router.events
  .filter((event:Event) => event instanceof NavigationEnd)
  .subscribe(x => console.log(x))

事件可以是instanceOfNavigationend，NavigationStart或Routes认可，但我只想要Navigationend。但是我得到一个错误

类型Observable上不存在属性“filter”

在编译时。

当我导入整个rxjs库时，错误就消失了。我应该导入什么使它工作而不加载完整的rxjs库？




Answer 1

角度更新（5.x到6.x）也随rxjs从5.x更新而来。x到6。所以简单地加上

import { filter } from 'rxjs/operators';

然后

this.router.events.pipe(
  filter((event:Event) => event instanceof NavigationEnd)
).subscribe(x => console.log(x))

希望这能帮助别人

Answer 2

匿名用户

对于这种情况，有几种可能的修复方法。

与rxjs/add/operator中的“补丁”操作符相比，Pipeable操作符是一种更好的方法，可以只引入所需的操作符/*

import { filter } from 'rxjs/operators';

// ..

 this.router.events.pipe(
   filter((event:Event) => event instanceof NavigationEnd)
 ).subscribe(x => console.log(x))

将导入语句更改为导入'rxjs/add/操作员/过滤器'。这将修改Observable.prototype并将filter方法添加到可观察类的每个实例中。

有两个后果：

• 每个应用程序执行一次导入语句就足够了
• 在共享库/npm包中，这可能会给库消费者带来一些混乱（使用库时，filter（）方法会神奇地出现在可观察的下）

语句import'rxjs/operator/filter'完全有效。它将只导入操作员。这种方法不会干扰可观察的。原型。不利的一面是，这将使连锁几家运营商更加困难。

import 'rxjs/operator/filter'; // This is valid import statement.
                               // It will import the operator without 
                               // modifying Observable prototype
// ..

// Change how the operator is called
filter.call(
   this.router.events, 
   (event:Event) => event instanceof NavigationEnd
).subscribe(x => console.log(x));

更多详情：管道操作员

Answer 3

更新

对于RXJS 5. x版本：

导入'rxjs/add/operator/filter'

对于RXJS 6. x版本：

从“rxjs/operators”导入{filter}

RxJS团队设计了以下规则来帮助JavaScript开发人员重构导入路径：

1. rxjs/operators：包含所有可管道化的运算符

从'rxjs/operators'导入{map，filter，scan}

import{Observable，Subject，asapScheduler，pipe，of，from，interval，merge，fromEvent}从'rxjs'导入