Каналы - это фильтры для преобразования данных (форматов) в шаблоне.
Я наткнулся на 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
}
Наблюдаемые операторы состоят из конвейерного метода, известного как конвейерные операторы. Вот пример.
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. Затем функция фильтра фильтрует результат только до нечетных чисел.