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


110

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

Je suis tombé sur la pipe()fonction ci-dessous. Que pipe()signifie exactement cette fonction dans ce cas?

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


3
@Ajay je reçois cette page et un tas de références à | les usages. Ce qui ne répond pas à ce que sont les tuyaux rxjs.
182764125216

Réponses:


125

Ne vous méprenez pas avec les concepts de Angular et RxJS

Nous avons un concept de tuyaux en Angular et une pipe()fonction en RxJS.

1) Tuyaux en angulaire : un tuyau prend des données en entrée et les transforme en sortie souhaitée
https://angular.io/guide/pipes

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

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

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


44

Les tuyaux dont vous parlez dans la description de départ sont différents du tuyau que vous avez montré dans l'exemple.

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

Le que pipe()vous avez montré dans l'exemple est la pipe()méthode de RxJS 5.5 (RxJS est la valeur par défaut pour toutes les applications angulaires). Dans Angular5, tous les opérateurs RxJS peuvent être importés en utilisant une importation unique et ils sont maintenant combinés en utilisant la méthode du tube.

tap()- L'opérateur tap 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' tap()opérateur exécutera toute fonction que vous souhaitez qu'il exécute avec la réponse. Dans l'exemple, il enregistrera simplement cette chaîne.

catchError()- catchError fait exactement la même chose mais avec une réponse d'erreur. Si vous voulez lancer 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 de cela, il enregistrera simplement cette chaîne.


"les tuyaux dont vous parlez dans la description de départ ..." -> non ils ne sont pas différents. ; A mon avis, sa question était parfaitement claire (pas de confusion si possible). Il y a beaucoup de concepts en programmation qui pourraient être appelés «tuyaux», mais en étant très précis dans sa description et en les appelant «fonctions de tuyaux», il a éliminé toute confusion possible. Je ne saurais pas comment il aurait pu les appeler autrement.
bvdb

1
"Les tuyaux sont des filtres pour transformer les données (formats) dans le modèle." Ici, il parlait de tuyau dans Angular 2+, comme la date, les tuyaux en majuscules fournis dans Angular (qui font exactement ce qu'il a dit, c'est-à-dire formater les données dans le modèle) Et dans la description, il a montré un exemple de la fonction de tuyau RXJS . Alors oui, ces 2 choses sont totalement différentes.
BhargavG

Je le reprends, mea culpa. J'ai oublié cette phrase. Je souhaite pouvoir annuler le -1. :( Mais il est malheureusement verrouillé.
bvdb

ce n'est pas grave. Heureux que cela dissipe tous les doutes. Cheers :-)
BhargavG

15

Les opérateurs RxJS sont des fonctions qui s'appuient sur la fondation 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 relier les opérateurs entre eux. Les tuyaux vous permettent de combiner plusieurs fonctions en une seule fonction.

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


Avez-vous un exemple?
lofihelsinki

Dans l'exemple ci-dessous, nous avons diffusé la fonction de filtre et de carte. Maintenant, les deux fonctions seront exécutées séquentiellement comme indiqué dans l'exemple. Tout d'abord, il filtrera le résultat, puis il mappera les résultats. J'espère que cela aidera. import {filtre, carte} de 'rxjs / operators'; const squareOdd = of (1, 2, 3, 4, 5) .pipe (filtre (n => n% 2! == 0), map (n => n * n)); // Abonnez-vous pour obtenir les valeurs squareOdd.subscribe (x => console.log (x));
manoj

Vraiment excellente réponse, mais il est regrettable que très moins de votes positifs. +1 de moi.
Ashok kumar

7

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

C'est 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 canalisables.

À partir de la version 5.5, RxJS a livré des "opérateurs pipeable" et renommé certains opérateurs:

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

6

Deux types très différents de tuyaux angulaires - tuyaux et RxJS - tuyaux

Tuyau angulaire

Un tuyau prend des données en entrée et les transforme en une sortie souhaitée. Dans cette page, vous utiliserez des tuyaux pour transformer la propriété d'anniversaire d'un composant en une date conviviale.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

RxJS - Tuyau

Les opérateurs observables sont composés à l'aide d'une méthode de canalisation connue sous le nom d'opérateurs de tuyauterie. Voici un exemple.

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

const source$: Observable<number> = range(0, 10);

source$.pipe(
    map(x => x * 2),
    filter(x => x % 3 === 0)
).subscribe(x => console.log(x));

La sortie pour cela dans la console serait la suivante:

0

6

12

18

Pour toute variable contenant une observable, nous pouvons utiliser la méthode .pipe () pour transmettre une ou plusieurs fonctions d'opérateur qui peuvent travailler et transformer chaque élément de la collection observable.

Ainsi, cet exemple prend chaque nombre dans la plage de 0 à 10 et le multiplie par 2. Ensuite, la fonction de filtrage pour filtrer le résultat jusqu'aux nombres impairs.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.