javascript - ejemplo - rxjs observable angular

La propiedad ''filter'' no existe en el tipo ''Observable<Event>''

Question

Hola, estoy usando Angular 2 final con el enrutador 3.0. Quiero filtrar los eventos que se emiten desde this.router.events

Lo que quiero hacer :

import ''rxjs/operator/filter'';

//...

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

event puede ser instancia de NavigationEnd , NavigationStart o RoutesRecognized pero solo quiero NavigationEnd . Pero me sale un error que

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

durante el tiempo de compilación.

Cuando importo toda la biblioteca rxjs , el error desaparece. ¿Qué debo importar para que funcione sin cargar la biblioteca completa de rxjs?

Answer 1

Angular Update (5.xa 6.x) también viene con la actualización de rxjs de 5.xa 6.x Así que simplemente agregue

import { filter } from ''rxjs/operators'';

entonces

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

Espero que ayude a alguien

Answer 2

Después de actualizar a Rxjs 6 con la actualización Angular 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 3

Hay varias soluciones posibles para este escenario.

1) Utilice operadores canalizables

Los operadores canalizables están destinados a ser un mejor enfoque para atraer solo a los operadores que necesita que los operadores "parche" que se encuentran en rxjs / add / operator / *

import { filter } from ''rxjs/operators'';

// ..

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

2) Use ''rxjs / add / operator / filter''

Cambie la declaración de import ''rxjs/add/operator/filter'' para import ''rxjs/add/operator/filter'' . Esto modificará Observable.prototype y agregará un método de filter a cada instancia de la clase Observable.

Hay dos consecuencias:

• es suficiente ejecutar la declaración de importación solo una vez por aplicación
• en un paquete de biblioteca / npm compartido, esto podría generar cierta confusión al consumidor de la biblioteca filter() método filter() aparecerá mágicamente en Observable mientras se usa la biblioteca)

3) Deje la importación del operador pero cambie cómo se llama

La declaración de import ''rxjs/operator/filter'' es perfectamente válida. Importará solo el operador. Este enfoque no alterará el Observable.prototype . En el lado negativo, será más difícil encadenar a varios operadores.

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

Más detalles: operadores de tuberías

Answer 4

La forma más fácil de solucionar esto es simplemente

npm install rxjs-compat 

¡lo que hará que cualquier diferencia de versión desaparezca mágicamente!

Answer 5

Verifique el tipo de evento aquí -> .filter ((evento: evento)

Answer 6

ACTUALIZAR

Para la versión RXJS 5.x :

import ''rxjs/add/operator/filter'';

Para la version RXJS 6.x :

import { filter } from ''rxjs/operators'';

El equipo de RxJS ha diseñado las siguientes reglas para ayudar a los desarrolladores de JavaScript a refactorizar rutas de importación:

1. rxjs/operators : contiene todos los operadores canalizables.

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

2. rxjs : contiene métodos de creación, tipos, planificadores y utilidades.

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