web-dev-qa-db-ja.com

プロパティ 'filter'はタイプ 'Observable <Event>'に存在しません

こんにちは、ルーター3.0でAngular 2 finalを使用しています。 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ライブラリをロードせずに機能させるには、何をインポートする必要がありますか？

javascriptangularrxjs
53
ritz078

UPDATE

RXJS 5.xバージョンの場合：

import 'rxjs/add/operator/filter';

RXJS 6.xの場合 バージョン ：

import { filter } from 'rxjs/operators';

ルールに従う は、JavaScript開発者がインポートパスをリファクタリングできるようにRxJSチームによって設計されました。

  1. rxjs/operators：すべてのパイプ可能な演算子が含まれます。

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

  1. rxjs：作成メソッド、タイプ、スケジューラー、およびユーティリティが含まれます。

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

96
candidJ

このシナリオにはいくつかの可能な修正があります。

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が変更され、Observableクラスのすべてのインスタンスにfilterメソッドが追加されます。

2つの結果があります。

  • アプリケーションごとにimportステートメントを1回実行するだけで十分です。
  • 共有ライブラリ/ 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));

詳細： パイプ可能な演算子

33
Petr Havlicek

Angular Update（5.xから6.x）には、rxjsの5.xから6.xへの更新も付属しています。

import { filter } from 'rxjs/operators';

それから

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

それが誰かを助けることを願っています

15
Ian Samz

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();
7
Nathaniel H

それを回避する最も簡単な方法は、

npm install rxjs-compat

バージョンの違いは魔法のように消えます！

4
wendellmva