Cos'è la funzione pipe () in Angular

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

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

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.

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.

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

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.