“Observable ”类型中不存在属性“过滤器”

Hi I am using Angular 2 final with router 3.0. I want to filter the events that are emitted from this.router.events

嗨,我正在使用Angular 2 final与路由器3.0。我想过滤从this.router.events发出的事件

What I want to do :

我想做的事 :

import 'rxjs/operator/filter';

//...

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

event can be instanceOf NavigationEnd, NavigationStart or RoutesRecognized but I want only NavigationEnd. But I get an error that

事件可以是instanceOf NavigationEnd,NavigationStart或RoutesRecognized但我只想要NavigationEnd。但我得到一个错误

Property 'filter' does not exist on type Observable<Event>

Observable 类型中不存在属性“过滤器”

during compile time.

在编译期间。

When i import the whole rxjs library the error disappears. What should I import to make it work without loading the full rxjs library ?

当我导入整个rxjs库时,错误消失。我应该导入什么才能使它工作而不加载完整的rxjs库?

6 个解决方案

#1

UPDATE

For RXJS 5.x version:

对于RXJS 5.x版本:

import 'rxjs/add/operator/filter';

For RXJS 6.x version:

对于RXJS 6.x版本:

import { filter } from 'rxjs/operators';

从'rxjs / operators'导入{filter};

The following rules have been designed by the RxJS team to help JavaScript developers refactor import paths:

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

1. rxjs/operators: Contains all pipeable operators.

rxjs /运算符:包含所有可管道运算符。

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

从'rxjs /运算符'导入{map,filter,scan};

2. rxjs: Contains creation methods, types, schedulers, and utilities.

rxjs:包含创建方法,类型,调度程序和实用程序。

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

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

#2

There are several possible fixes for this scenario.

此方案有几种可能的修复方法。

1) Use pipeable operators

Pipeable operators are meant to be a better approach for pulling in just the operators you need than the "patch" operators found in rxjs/add/operator/*

与rxjs / add / operator / *中的“补丁”运算符相比,可管理运算符是一种更好的方法,可以提供所需的运算符。

import { filter } from 'rxjs/operators';

// ..

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

---

2) Use 'rxjs/add/operator/filter'

Change the import statement to import 'rxjs/add/operator/filter'. This will modify Observable.prototype and add filter method to an every instance of the Observable class.

更改import语句以导入'rxjs / add / operator / filter'。这将修改Observable.prototype并将filter方法添加到Observable类的每个实例。

There are two consequences:

有两个后果:

• it is enough to execute the import statement just once per the application

每个应用程序只执行一次import语句就足够了

• in a shared library/npm package this might bring some confusion to a library consumer (filter() method will magically appear under Observable while using the library)

在共享库/ npm包中,这可能会给库使用者带来一些混淆(filter()方法在使用库时会神奇地出现在Observable下)

---

3) Leave the operator import but change how it is called

The statement import 'rxjs/operator/filter' is perfectly valid. It will import just the operator. This approach will not mess with the Observable.prototype. On downside it will make it more difficult to chain several operators.

语句import'rxjs / operator / filter'完全有效。它只会导入运营商。这种方法不会弄乱Observable.prototype。在不利方面,它将使连锁几个运营商变得更加困难。

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));

---

More details: Pipeable Operators

更多细节:可管理的操作员

#3

Angular Update(5.x to 6.x) also comes with update of rxjs from 5.x to 6.x So simply add

角度更新(5.x到6.x)还附带了从5.x到6.x的rxjs更新所以简单地添加

import { filter } from 'rxjs/operators';

then

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

Hope That helps someone

希望这有助于某人

#4

After updating to Rxjs 6 with Angular 6 upgrade

在使用Angular 6升级更新到Rxjs 6之后

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

...
this.registrationForm.valueChanges
      .pipe(
        filter(() => this.registrationForm.valid),
        map((registrationForm: any) => {
          this.registrationVm.username = registrationForm.username;
          this.registrationVm.password = registrationForm.password;
          this.registrationVm.passwordConfirm = registrationForm.passwordConfirm;
        })
      )
      .subscribe();

#5

The easiest way is to just

最简单的方法就是

npm install rxjs-compat 

which will make any version differences magically go away!

这将使任何版本差异神奇地消失!

#6

Please check the type of Event here -> .filter((event:Event)

请在这里检查事件的类型 - > .filter((事件:事件)