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

Question

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

Je suis tombé sur le pipe() fonctionnent comme suit. Que fait cette 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}`))
);

Answer 1

Ne pas s'embrouiller avec les concepts d'Angular et de RxJS

Nous avons le concept de tuyaux dans Angular et pipe() dans RxJS.

1) Les tuyaux en Angular : Un tuyau prend des données en entrée et les transforme en sortie souhaitée.
https://angular.io/guide/pipes

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

El pipe() prend comme arguments les fonctions que vous voulez combiner, et renvoie une nouvelle fonction qui, lorsqu'elle est exécutée, exécute les fonctions composées en séquence.
https://angular.io/guide/rx-library (cherchez "pipes" dans cette URL, vous trouverez la même chose)

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

Answer 2

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

Dans Angular (2|4|5), les tubes 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 - Doc tuyau angulaire

El pipe() que vous avez montré dans l'exemple est le pipe() méthode de RxJS 5.5 (RxJS est la valeur par défaut pour toutes les applications Angular). Dans Angular5 tous les RxJS peuvent être importés à l'aide de l'importation simple et ils sont maintenant combinés à l'aide de la méthode pipe.

tap() - L'opérateur de robinetterie de RxJS examinera la valeur de l'Observable et fera quelque chose avec cette valeur. En d'autres termes, après une demande d'API réussie, la fonction tap() fera toutes les fonctions que vous voulez qu'il exécute avec la réponse. Dans l'exemple, il va juste enregistrer 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, la fonction sera appelée handleError() et à l'intérieur de ça, il va juste enregistrer cette chaîne.

Answer 3

Deux types de tuyaux très différents Angulaire - Tuyaux y RxJS - Pipes

Tube angulaire

Un tuyau reçoit 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 adaptée aux humains.

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

Les opérateurs observables sont composés à l'aide d'une méthode appelée Pipeable Operators. 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));

Le résultat de cette opération dans la console serait le suivant :

0

6

12

18

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

Cet exemple prend donc chaque nombre de 0 à 10 et le multiplie par 2. Ensuite, la fonction de filtrage permet de filtrer le résultat en ne retenant que les nombres impairs.

Answer 4

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

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

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

El pipe() prend comme arguments les fonctions que vous voulez combiner, et renvoie une nouvelle fonction qui, lorsqu'elle est exécutée, exécute les fonctions composées en séquence.

Answer 5

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

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

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

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