Cos'è la funzione pipe () in Angular


109

Le pipe sono filtri per trasformare i dati (formati) nel modello.

Mi sono imbattuto nella pipe()funzione come sotto. Cosa significa pipe()esattamente questa funzione in questo caso?

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


3
@Ajay ricevo questa pagina e un sacco di riferimenti a | usi. Il che non risponde a cosa siano le pipe rxjs.
182764125216

Risposte:


124

Non confondersi con i concetti di Angular e RxJS

Abbiamo il concetto di pipe in Angular e la pipe()funzione in RxJS.

1) Pipes in Angular : una pipe prende i dati come input e li trasforma nell'output desiderato
https://angular.io/guide/pipes

2) pipe()funzione in RxJS : è possibile utilizzare pipe per collegare gli operatori tra loro. Le pipe ti consentono di combinare più funzioni in un'unica funzione.

La pipe()funzione prende come argomenti le funzioni che si desidera combinare e restituisce una nuova funzione che, una volta eseguita, esegue le funzioni composte in sequenza.
https://angular.io/guide/rx-library (cerca pipe in questo URL, puoi trovare lo stesso)

Quindi, secondo la tua domanda, stai facendo riferimento alla pipe()funzione in RxJS


43

I tubi di cui parli nella descrizione iniziale sono diversi dal tubo che hai mostrato nell'esempio.

In Angular (2 | 4 | 5) le pipe vengono utilizzate per formattare la vista come hai detto. Penso che tu abbia una conoscenza di base dei tubi in Angular, puoi saperne di più da questo link - Angular Pipe Doc

Quello pipe()che hai mostrato nell'esempio è il pipe()metodo di RxJS 5.5 (RxJS è l'impostazione predefinita per tutte le app Angular). In Angular5 tutti gli operatori RxJS possono essere importati utilizzando l'importazione singola e ora vengono combinati utilizzando il metodo pipe.

tap()- L'operatore di tocco RxJS esaminerà il valore osservabile e farà qualcosa con quel valore. In altre parole, dopo una richiesta API riuscita, l' tap()operatore eseguirà qualsiasi funzione tu voglia che esegua con la risposta. Nell'esempio, registrerà solo quella stringa.

catchError()- catchError fa esattamente la stessa cosa ma con una risposta di errore. Se vuoi lanciare un errore o vuoi chiamare qualche funzione se ottieni un errore, puoi farlo qui. Nell'esempio, chiamerà handleError()e al suo interno registrerà semplicemente quella stringa.


"i tubi di cui parli nella descrizione di partenza ..." -> no non sono diversi. ; Secondo me la sua domanda era perfettamente chiara (nessuna confusione che cosa fosse così possibile). Ci sono molti concetti nella programmazione che potrebbero essere chiamati "pipe", ma essendo molto specifici nella sua descrizione e chiamandoli "funzioni pipe" ha eliminato ogni possibile confusione. Non saprei come avrebbe potuto chiamarli altrimenti.
bvdb

1
"Le pipe sono filtri per trasformare i dati (formati) nel modello." Qui stava parlando di pipe in Angular 2+, come date, pipe maiuscole fornite in Angular (che fanno esattamente quello che ha detto cioè formattare i dati nel template) E nella descrizione ha mostrato un esempio della funzione pipe RXJS . Quindi sì, quelle 2 cose sono totalmente diverse.
BhargavG

Me lo riprendo, mea culpa. Ha trascurato quella frase. Vorrei poter annullare il -1. :( Ma sfortunatamente è bloccato.
bvdb

non è un grosso problema. Felice che cancelli tutti i dubbi. Saluti :-)
BhargavG

15

Gli operatori RxJS sono funzioni che si basano sulle basi osservabili per consentire una manipolazione sofisticata delle raccolte.

Ad esempio, RxJS definisce operatori come map(), filter(), concat()e flatMap().

È possibile utilizzare le pipe per collegare insieme gli operatori. Le pipe ti consentono di combinare più funzioni in un'unica funzione.

La pipe()funzione prende come argomenti le funzioni che si desidera combinare e restituisce una nuova funzione che, una volta eseguita, esegue le funzioni composte in sequenza.


Hai un esempio?
lofihelsinki

Nell'esempio seguente abbiamo reindirizzato la funzione di filtro e mappa. Ora entrambe le funzioni verranno eseguite sequenzialmente come fornito nell'esempio. Per prima cosa filtrerà il risultato e poi mapperà i risultati. Spero che possa aiutare. import {filter, map} da "rxjs / operators"; const squareOdd = of (1, 2, 3, 4, 5) .pipe (filter (n => n% 2! == 0), map (n => n * n)); // Iscriviti per ottenere i valori squareOdd.subscribe (x => console.log (x));
manoj

Risposta davvero eccellente, ma è un peccato che il numero di voti positivi sia molto inferiore. +1 da me.
Ashok kumar il

7

Devi guardare alla documentazione ufficiale di ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

Questo è un buon articolo sul piping in RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

In breve .pipe () consente di concatenare più operatori pipabili.

A partire dalla versione 5.5 RxJS ha fornito "operatori pipeable" e rinominato alcuni operatori:

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

6

Due tipi molto diversi di tubi angolari - tubi e RxJS - tubi

Angular-Pipe

Una pipe accetta i dati come input e li trasforma in un output desiderato. In questa pagina, utilizzerai le pipe per trasformare la proprietà del compleanno di un componente in una data amichevole.

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

Gli operatori osservabili sono composti utilizzando un metodo pipe noto come operatori pipeable. Ecco un esempio.

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

L'output per questo nella console sarebbe il seguente:

0

6

12

18

Per ogni variabile che contiene un osservabile, possiamo utilizzare il metodo .pipe () per passare una o più funzioni operatore che possono lavorare e trasformare ogni elemento nella raccolta osservabile.

Quindi questo esempio prende ogni numero nell'intervallo da 0 a 10 e lo moltiplica per 2. Quindi, la funzione di filtro filtra il risultato fino ai soli numeri dispari.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.