"Observable <Event>"类型中不存在属性"过滤器"

Question

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

我想做的事 :

import 'rxjs/operator/filter';

//...

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

event可以是instanceOf NavigationEnd,NavigationStart或者RoutesRecognized我只想要NavigationEnd.但我得到一个错误

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

在编译期间.

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

Answer 1

UPDATE

对于RXJS 5.x版本:

import 'rxjs/add/operator/filter';

对于RXJS 6.x 版本:

import { filter } from 'rxjs/operators';

在下面的规则已经被设计为通过RxJS团队来帮助JavaScript开发人员重构进口路径:

1. rxjs/operators:包含所有可管道运算符.

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

2. rxjs:包含创建方法,类型,计划程序和实用程序.

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

Answer 2

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

1)使用可管道操作员

与rxjs/add/operator/*中的"补丁"运算符相比,可管理运算符是一种更好的方法来提取所需的运算符

import { filter } from 'rxjs/operators';

// ..

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

2)使用'rxjs/add/operator/filter'

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

有两个后果:

• 每个应用程序只执行一次import语句就足够了
• 在共享库/ npm包中,这可能会给库使用者带来一些困惑(在使用库时,filter()方法会神奇地出现Observable)

3)保留操作员导入但改变其调用方式

该声明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));

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

Answer 3

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

import { filter } from 'rxjs/operators';

然后

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

希望这有助于某人

Answer 4

在使用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();

Answer 5

解决这个问题的最简单方法就是

npm install rxjs-compat 

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