Що таке функція pipe () у кутовій

Труби - це фільтри для перетворення даних (форматів) у шаблоні.

Я натрапив на 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

У нас є концепція труб pipe()в кутовій і функціонує в RxJS.

1) Труби кутові : труба приймає дані як вхідні та перетворює їх на потрібний вихід
https://angular.io/guide/pipes

2) pipe()функція в RxJS : Ви можете використовувати труби для з'єднання операторів разом. Труби дозволяють поєднувати кілька функцій в одну функцію.

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

Отже, відповідно до вашого питання, ви посилаєтесь на pipe()функцію в RxJS

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

У кутових (2 | 4 | 5) труби використовуються для форматування подання, як ви вже говорили. Я думаю, що ви маєте основне розуміння труб у Angular, ви можете дізнатися більше про це за цим посиланням - Angular Pipe Doc

pipe()Ви показали в прикладі є pipe()методом RxJS 5.5 (RxJS за замовчуванням для всіх кутових додатків). У Angular5 всі оператори RxJS можна імпортувати за допомогою одного імпорту, і вони тепер об'єднуються за допомогою методу pipe.

tap()- Оператор крана RxJS перегляне значення, що спостерігається, і зробить щось із цим значенням. Іншими словами, після успішного запиту 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

Два дуже різні типи труб кутові - Труби та RxJS - Труби

Кутово-трубний

Труба приймає дані як вхідні та перетворює їх на потрібний вихід. На цій сторінці ви використовуєте труби, щоб перетворити властивість дня народження компонента в зручну для людини дату.

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. Потім функція фільтра відфільтрує результат до лише непарних чисел.