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

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

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

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 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.

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

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.