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

<强>更新

对于RXJS 5.x版本：

import 'rxjs/add/operator/filter';

RXJS 6.x version：

import { filter } from 'rxjs/operators';

following rules由RxJS团队设计帮助   JavaScript开发人员重构导入路径：


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

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


rxjs：包含创建方法，类型，计划程序和实用程序。

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

Answer 2

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

1）使用可管理运算符

管道式操作员应该是一种更好的方法，可以提供您需要的操作员而不是＆＃34;补丁＆＃34;在rxjs / add / operator / *

中找到的运算符

import { filter } from 'rxjs/operators';

// ..

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

2）使用＆＃39; rxjs / add / operator / filter＆＃39;

将导入语句更改为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));

更多详情：Pipeable Operators

Answer 3

Angular Update（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

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

Answer 6

请注意：

我想提一些以上答案未解决的问题。

RxJs是一个独立的库，因此它的操作也是独立的方法。映射，过滤器等是无法通过对象访问的运算符方法。请记住，您是分别导入它们的。

例如，您不能import { filter}并想通过router对象访问它。因为router对象是API中某个特定角度的类实例，所以它永远不会起作用。 Angular提供了一种pipe()方法，该方法使您可以注册在流程中必须链接的方法，然后再移至router对象中不属于router对象的下一个方法。 / p>

总是记住

Answer 7

请在此处查看活动类型 - ＆gt; .filter（（事件：事件）

财产＆＃39;过滤＆＃39;在类型＆＃39; Observable <event>＆＃39;上不存在

7 个答案:

1）使用可管理运算符

2）使用＆＃39; rxjs / add / operator / filter＆＃39;

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