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

pipe angular 5

Question

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

Encontré la función pipe() como se muestra a continuación. ¿Qué significa exactamente esta función pipe() en este caso?

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

Answer 1

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

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

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

Answer 2

Las tuberías de las que está hablando en la descripción inicial son diferentes de las tuberías que mostró en el ejemplo.

En Angular (2 | 4 | 5), las tuberías se utilizan para formatear la vista como usted dijo. 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: https://angular.io/guide/pipes

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

tap() - El operador de tap RxJS mirará el valor Observable y hará algo con ese valor. En otras palabras, después de una solicitud API exitosa, el operador tap() 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 arrojar un error o llamar a alguna función si obtiene un error, puede hacerlo aquí. En el ejemplo, llamará a handleError() y dentro de eso, solo registrará esa cadena.

Answer 3

No se confunda con los conceptos de Angular y RxJS

Tenemos el concepto de tuberías en Angular y la función de pipes() 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) función pipe() en RxJS : puede usar tuberías para vincular operadores. Los tubos le permiten combinar múltiples funciones en una sola función.

La función pipe() 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 lo mismo)

Entonces, de acuerdo con su pregunta, está refiriendo la función pipe () en RxJS

Answer 4

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

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

Puede usar tuberías para vincular operadores juntos. Los tubos le permiten combinar múltiples funciones en una sola función.

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