¿Qué es la función pipe () en Angular?

Las tuberías son filtros para transformar datos (formatos) en la plantilla.

Encontré la pipe()función de la siguiente manera. ¿Qué significa pipe()exactamente esta función en este caso?

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

No se confunda con los conceptos de Angular y RxJS

Tenemos concepto de tuberías en Angular y pipe()función en RxJS.

1) Tuberías en Angular : una tubería toma datos como entrada y los transforma en la salida deseada
https://angular.io/guide/pipes

2) pipe()función en RxJS : puede usar tuberías para vincular operadores. Las tuberías le permiten combinar múltiples funciones en una sola función.

La pipe()función toma como argumentos las funciones que desea combinar y devuelve una nueva función que, cuando se ejecuta, ejecuta las funciones compuestas en secuencia.
https://angular.io/guide/rx-library (busque tuberías en esta URL, puede encontrar las mismas)

Entonces, de acuerdo con su pregunta, se refiere a la pipe()función en RxJS

Las tuberías de las que habla en la descripción inicial son diferentes de la tubería que mostró en el ejemplo.

En Angular (2 | 4 | 5), las tuberías se utilizan para formatear la vista como dijiste. Creo que tiene una comprensión básica de las tuberías en Angular, puede obtener más información al respecto en este enlace: Angular Pipe Doc

El pipe()que ha mostrado en el ejemplo es el pipe()método de RxJS 5.5 (RxJS es el predeterminado para todas las aplicaciones angulares). En Angular5, todos los operadores RxJS se pueden importar usando una sola importación y ahora se combinan usando el método de tubería.

tap()- El operador del grifo RxJS mirará el valor observable y hará algo con ese valor. En otras palabras, después de una solicitud de API exitosa, el tap()operador realizará cualquier función que desee que realice con la respuesta. En el ejemplo, solo registrará esa cadena.

catchError()- catchError hace exactamente lo mismo pero con respuesta de error. Si desea lanzar un error o desea llamar a alguna función si obtiene un error, puede hacerlo aquí. En el ejemplo, llamará handleError()y dentro de eso, simplemente registrará esa cadena.

Los operadores RxJS son funciones que se basan en la base de los observables para permitir una manipulación sofisticada de colecciones.

Por ejemplo, RxJS define operadores como map(), filter(), concat(), y flatMap().

Puede utilizar tuberías para vincular operadores. Las tuberías le permiten combinar múltiples funciones en una sola función.

La pipe()función toma como argumentos las funciones que desea combinar y devuelve una nueva función que, cuando se ejecuta, ejecuta las funciones compuestas en secuencia.

Debe consultar la documentación oficial de ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

Este es un buen artículo sobre tuberías en RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

En resumen .pipe () permite encadenar múltiples operadores con canalización.

A partir de la versión 5.5, RxJS ha enviado "operadores de canalización" y ha cambiado el nombre de algunos operadores:

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

Dos tipos muy diferentes de Pipes Angular - Pipes y RxJS - Pipes

Tubo angular

Una tubería toma datos como entrada y los transforma en una salida deseada. En esta página, usará tuberías para transformar la propiedad de cumpleaños de un componente en una fecha amigable para los humanos.

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 - Tubería

Los operadores observables se componen mediante un método de tubería conocido como Operadores de tubería. Aquí hay un ejemplo.

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 salida para esto en la consola sería la siguiente:

0

6

12

18

Para cualquier variable que contenga un observable, podemos usar el método .pipe () para pasar una o varias funciones de operador que pueden trabajar y transformar cada elemento en la colección observable.

Entonces, este ejemplo toma cada número en el rango de 0 a 10 y lo multiplica por 2. Luego, la función de filtro filtra el resultado solo a los números impares.