Propriété "filtre" n'existe pas sur le type 'Observables '

Salut j'utilise L'Angular 2 final avec le routeur 3.0. Je veux filtrer les événements qui sont émis à partir d' this.router.events

Ce que je veux faire : 

import 'rxjs/operator/filter';

//...

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

event peut être instanceOf NavigationEnd,NavigationStart ou RoutesRecognized mais je veux seulement NavigationEnd. Mais je reçois une erreur qui

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

pendant la compilation.

quand j'importe le tout rxjs bibliothèque de l'erreur disparaît. Que dois-je importer pour le faire fonctionner sans charger le la bibliothèque complète de rxjs ?

35
demandé sur M98 2016-09-15 18:09:47

6 réponses

UPDATE

RXJS 5.x version:

import 'rxjs/add/operator/filter';

RXJS 6.x version:

import { filter } from 'rxjs/operators';

règles suivantes ont été conçus par L'équipe de RxJS pour aider Les développeurs JavaScript refactoriser importer des chemins:

  1. rxjs/operators: contient tous les opérateurs pipables.

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

  1. rxjs: Contient les méthodes de création, les types, les ordonnanceurs et les utilitaires.

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

83
répondu candidJ 2018-05-07 10:05:31

Il y a plusieurs solutions possibles pour ce scénario.

1) utiliser des opérateurs pipables

les opérateurs Pipables sont censés être une meilleure approche pour tirer juste les opérateurs dont vous avez besoin que les opérateurs "patch" trouvés dans rxjs/add/operator/*

import { filter } from 'rxjs/operators';

// ..

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

2) Utiliser 'rxjs/ajouter/opérateur/filtre

Modifier l'importation déclaration import 'rxjs/add/operator/filter'. Ceci va modifier Observable.prototypefilter méthode pour chaque instance de la Observables de la classe.

Il y a deux conséquences:

  • il suffit d'exécuter l'instruction d'importation, juste une fois, par l'application
  • dans une bibliothèque partagée/package npm cela peut apporter de la confusion à une bibliothèque de consommation (filter() la méthode apparaîtra comme par magie sous Observable tout en utilisant la bibliothèque)

3) quitter l'opérateur importer mais changer comment il est appelé

la déclaration import 'rxjs/operator/filter' est parfaitement valide. Il importera juste l'opérateur. Cette approche ne va pas jouer avec le Observable.prototype. Du côté négatif, il sera plus difficile d'enchaîner plusieurs opérateurs.

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

Plus de détails: Opérateurs Pipables

19
répondu Petr Havlicek 2018-03-04 22:41:43

Mise À Jour Angulaire(5.x à 6.x) est également fourni avec la mise à jour de rxjs à partir de 5.x à 6.x Donc simplement ajouter

import { filter } from 'rxjs/operators';


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

j'Espère Que l'aide à quelqu'un

5
répondu Ian Samz 2018-08-30 00:14:11

après mise à jour vers Rxjs 6 avec mise à jour angulaire 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();
4
répondu Nathaniel H 2018-06-03 21:29:04

la façon la plus facile est juste 

npm install rxjs-compat

ce qui fera disparaître par magie toute différence de version!

2
répondu wendellmva 2018-06-12 06:00:32

Veuillez vérifier le type de l'Événement ici -> .filtre((event:event)

0
répondu shyvijay 2017-12-17 15:56:46