Что такое функция pipe () в Angular

Каналы - это фильтры для преобразования данных (форматов) в шаблоне.

Я наткнулся на pipe()функцию, как показано ниже. Что pipe()именно означает эта функция в данном случае?

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

Не запутайтесь с концепциями Angular и RxJS

У нас есть концепция каналов в Angular и pipe()функция в RxJS.

1) Трубы в Angular : канал принимает данные в качестве входных и преобразует их в желаемый результат
https://angular.io/guide/pipes

2) pipe()функция в RxJS : вы можете использовать каналы для связывания операторов вместе. Каналы позволяют объединить несколько функций в одну.

pipe()Функция принимает в качестве аргументов функции , которые вы хотите объединить, и возвращает новую функцию , которая при выполнении, работает Сформированную функцию в последовательности.
https://angular.io/guide/rx-library (ищите каналы в этом URL, вы можете найти то же самое)

Итак, согласно вашему вопросу, вы ссылаетесь на pipe()функцию в RxJS

Трубы, о которых вы говорите в начальном описании, отличаются от каналов, которые вы показали в примере.

В Angular (2 | 4 | 5) каналы используются для форматирования представления, как вы сказали. Я думаю, у вас есть базовое представление о каналах в Angular, вы можете узнать больше об этом по этой ссылке - Angular Pipe Doc

В pipe()примере вы показали pipe()метод RxJS 5.5 (RxJS используется по умолчанию для всех приложений Angular). В Angular5 все операторы RxJS можно импортировать с помощью одного импорта, и теперь они объединяются с помощью метода конвейера.

tap()- Оператор крана RxJS будет смотреть на значение Observable и что-то делать с этим значением. Другими словами, после успешного запроса API tap()оператор выполнит любую функцию, которую вы хотите, чтобы он выполнял с ответом. В этом примере он просто регистрирует эту строку.

catchError()- catchError делает то же самое, но с ошибкой. Если вы хотите выдать ошибку или хотите вызвать какую-либо функцию, если вы получили ошибку, вы можете сделать это здесь. В этом примере он вызовет, handleError()а внутри просто запишет эту строку.

Операторы RxJS - это функции, которые построены на основе наблюдаемых объектов и позволяют выполнять сложные манипуляции с коллекциями.

Например, RxJS определяет операторы , такие как map(), filter(), concat(), и flatMap().

Вы можете использовать каналы для связывания операторов вместе. Каналы позволяют объединить несколько функций в одну.

pipe()Функция принимает в качестве аргументов функции , которые вы хотите объединить, и возвращает новую функцию , которая при выполнении, работает Сформированную функцию в последовательности.

Вам нужно обратиться к официальной документации ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

Это хорошая статья о конвейере в RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

Вкратце .pipe () позволяет связывать несколько конвейерных операторов.

Начиная с версии 5.5 RxJS поставляет «конвейерные операторы» и переименовывает некоторые операторы:

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

Два очень разных типа угловых труб - Pipes и RxJS - Pipes

Угловая труба

Канал принимает данные в качестве входных и преобразует их в желаемый результат. На этой странице вы будете использовать каналы для преобразования свойства дня рождения компонента в удобную для человека дату.

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 - Труба

Наблюдаемые операторы состоят из конвейерного метода, известного как конвейерные операторы. Вот пример.

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

Вывод в консоли будет следующим:

0

6

12

18

Для любой переменной, содержащей наблюдаемое, мы можем использовать метод .pipe () для передачи одной или нескольких операторных функций, которые могут работать и преобразовывать каждый элемент в наблюдаемой коллекции.

Итак, в этом примере каждое число в диапазоне от 0 до 10 умножается на 2. Затем функция фильтра фильтрует результат только до нечетных чисел.