web-dev-qa-db-fra.com

Angular 6 Syntaxe d'importation RXJS?

Je suis en train de migrer une application Angular 5 vers la dernière interface de ligne de commande et Angular 6 RC, ainsi que toutes mes importations observables. Je vois que Angular 6 modifie le fonctionnement des importations, mais je ne trouve aucune référence précise sur le fonctionnement de la syntaxe.

J'ai eu cela dans 5 et cela a bien fonctionné:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

Maintenant, avec la nouvelle syntaxe, je vois que

import { Observable, Subject, throwError} from 'rxjs';
import { map } from 'rxjs/operators';

Les deux premières lignes sont compilées, mais je n'arrive pas à comprendre comment se faire prendre et lancer, par exemple. .map () génère également une erreur de construction lorsqu'il est utilisé dans le code.

Quelqu'un at-il une référence à la façon dont cela est censé fonctionner?

angularrxjsangular-observable
39
Rick Strahl

Depuis rxjs 5.5 , catch a été renommé en catchError fonction pour éviter les conflits de noms.

En raison de la disponibilité d'opérateurs indépendants d'un observable, les noms d'opérateurs ne peuvent pas être en conflit avec les restrictions de mots clés JavaScript. Par conséquent, les noms de la version raccordable de certains opérateurs ont été modifiés.

import { catchError } from 'rxjs/operators';

Pour throw, vous pouvez utiliser ErrorObservable.

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
ErrorObservable.create(new Error("oops"));

rxjs 6

Au lieu de ErrorObservable, utilisez throwError .

 import { throwError } from 'rxjs'
 throwError(new Error("oops"));

De plus, vous devrez maintenant diriger les opérateurs au lieu de les chaîner directement à l'observable

22
Suraj Rao

Les tuyaux sont ce qui est nécessaire pour que les opérateurs puissent aller de l’avant.

version: rxjs 6.0.1

Exemple:

import { Observable } from "rxjs";
import { map } from "rxjs/operators";

Observable.create((observer: any) => {
    observer.next('Hello')
}).pipe(map((val: any) => val.toUpperCase()))
  .subscribe((x: any) => addItem(x))


function addItem(val: any) {
    console.log('val', val);
}

//output - (In uppercase)
HELLO
11
Dash

Ou si vous voulez continuer à utiliser la version 6.0.0 vous le faites

npm i --save rxjs-compat

ajouter une compatibilité inverse

5
Pian0_M4n

Exécutez ces 2 commandes après avoir exécuté ng update. Cela devrait corriger les importations rxjs:

  1. npm i -g rxjs-tslint
  2. rxjs-5-to-6-migrate -p src/tsconfig.app.json

Références:

4
user8152243

Vous avez juste besoin d'importer comme des opérateurs

import { Observable } from 'rxjs';
import { map, catchError, timeout } from 'rxjs/operators';
0
vishal