web-dev-qa-db-fra.com

Qu'est-ce que la fonction pipe () dans Angular 2?

Les pipes sont des filtres pour transformer des données (formats) dans le modèle.

Je suis tombé sur la fonction pipe() comme ci-dessous. Qu'est-ce que cette fonction pipe() signifie exactement dans ce cas?

return this.http.get<Hero>(url)
  .pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
);
angularrxjs
77
Dinesh Sharma

Ne soyez pas confus avec les concepts de Angular et de RxJS

Nous avons le concept de tuyaux dans la fonction Angular et pipes() dans RxJS

1) Pipes in Angular : Un pipe prend des données en entrée et les transforme en sortie désirée.
https://angular.io/guide/pipes

2) pipe() fonction dans RxJS : Vous pouvez utiliser des canaux pour lier des opérateurs entre eux. Les tuyaux vous permettent de combiner plusieurs fonctions en une seule.

La fonction pipe() prend comme arguments les fonctions que vous souhaitez combiner et renvoie une nouvelle fonction qui, une fois exécutée, exécute les fonctions composées dans l'ordre.
https://angular.io/guide/rx-library (recherchez des pipes dans cette URL, vous pouvez trouver la même chose)

Donc, selon votre question, vous faites référence à la fonction pipe () dans RxJS

82
Shiva Nayak Dharavath

Les pipes dont vous parlez dans la description de départ sont différentes de la pipe que vous avez montrée dans l'exemple.

Dans Angular (2 | 4 | 5), les pipes sont utilisées pour formater la vue comme vous l'avez dit. Je pense que vous avez une compréhension de base des pipes dans Angular, vous pouvez en apprendre plus à partir de ce lien - Angular Pipe Doc

La pipe() que vous avez montrée dans l'exemple est la méthode pipe() de RxJS 5.5 (RxJS est la valeur par défaut pour tous les Angular applications). Dans Angular5 tous les opérateurs RxJS peuvent être importés à l'aide d'une seule importation et ils sont maintenant combinés en utilisant la méthode du tuyau.

tap() - L'opérateur du robinet RxJS examinera la valeur Observable et fera quelque chose avec cette valeur. En d'autres termes, après une demande d'API réussie, l'opérateur tap() effectuera toute fonction que vous souhaitez qu'il exécute avec la réponse. Dans l'exemple, il suffit de consigner cette chaîne.

catchError() - catchError fait exactement la même chose mais avec une réponse d'erreur. Si vous voulez générer une erreur ou appeler une fonction si vous obtenez une erreur, vous pouvez le faire ici. Dans l'exemple, il appellera handleError() et, à l'intérieur, il enregistrera simplement cette chaîne.

40
BhargavG

RxJS Les opérateurs sont des fonctions qui s'appuient sur la base d'observables pour permettre une manipulation sophistiquée des collections.

Par exemple, RxJS définit des opérateurs tels que map(), filter(), concat() et flatMap().

Vous pouvez utiliser des tuyaux pour lier des opérateurs entre eux. Les tuyaux vous permettent de combiner plusieurs fonctions en une seule.

La fonction pipe() prend comme arguments les fonctions que vous souhaitez combiner et renvoie une nouvelle fonction qui, une fois exécutée, exécute les fonctions composées dans l'ordre.

8
manoj

Vous devez consulter la documentation officielle de ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

Il s'agit d'un bon article sur la tuyauterie dans RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

En bref, .pipe () permet de chaîner plusieurs opérateurs pouvant être raccordés.

À partir de la version 5.5, RxJS a fourni les "opérateurs raccordables" et renommé certains opérateurs:

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize
5
Oleksandr Sachuk