首页 文章

属性'filter'在类型'Observable<Event>'上不存在

提问于
浏览 次
39

嗨，我正在使用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库？

javascript angular rxjs

6 回答

  • 22

    UPDATE

    对于 RXJS 5.x 版本：

    import 'rxjs/add/operator/filter';

    对于 RXJS 6.x version：

    import { filter } from 'rxjs/operators';

    RxJS团队设计了以下规则来帮助JavaScript开发人员重构导入路径：rxjs / operators：包含所有可管道运算符 . 从'rxjs / operators'导入{map，filter，scan}; rxjs：包含创建方法，类型，调度程序和实用程序 . 从'rxjs'导入{Observable，Subject，asapScheduler，pipe，of，from，interval，merge，fromEvent};

    回复于
  • 3

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

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

    更多细节：Pipeable Operators

    回复于
  • 4

    角度更新（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))

    希望这有助于某人

    回复于
  • 0

    在使用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();
    回复于
  • 88

    最简单的方法就是

    npm install rxjs-compat

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

    回复于
  • 8

    请在这里查看活动类型 - > .filter((event:Event)

    回复于

相关问题