什么是Angular 2中的pipe()函数？

Question

管道是用于转换模板中的数据(格式)的过滤器.

我遇到了pipe()如下功能.pipe()在这种情况下,这个功能究竟意味着什么？

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

Answer 1

不要混淆Angular和RxJS的概念

我们在Angular中有管道概念,pipe()在RxJS中有功能

1)Angular中的管道:管道接收数据作为输入并将其转换为所需的输出
https://angular.io/guide/pipes

2)pipe()RxJS中的功能:您可以使用管道将操作员链接在一起.管道允许您将多个功能组合到一个功能中.

该pipe()函数将要组合的函数作为其参数,并返回一个新函数,该函数在执行时按顺序运行组合函数.
https://angular.io/guide/rx-library(在这个URL中搜索管道,你可以找到相同的)

所以根据你的问题,你在RxJS中引用了pipe()函数

Answer 2

您在起始描述中谈论的管道与您在示例中显示的管道不同.

在Angular(2 | 4 | 5)中,如您所说,管道用于格式化视图.我认为你对Angular中的管道有基本的了解,你可以从这个链接中学到更多 - Angular Pipe Doc

将pipe()你在示例中显示的是pipe()方法RxJS 5.5(RxJS是所有角度的应用程序默认值).在Angular5中,可以使用单个导入导入所有RxJS运算符,现在使用管道方法将它们组合在一起.

tap() - RxJS tap操作符将查看Observable值并使用该值执行某些操作.换句话说,在成功的API请求之后,tap()操作员将执行您希望它与响应一起执行的任何功能.在示例中,它将只记录该字符串.

catchError() - catchError完全相同但有错误响应.如果您想抛出错误或想要在出现错误时调用某个函数,可以在此处执行此操作.在示例中,它将调用handleError()并在其中,它将只记录该字符串.

Answer 3

两种截然不同的Angular 管道类型- 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 - 管道

Observable 操作符是使用一种称为 Pipeable Operators 的管道方法组成的。这是一个例子。

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

对于任何持有 observable 的变量，我们可以使用 .pipe() 方法传入一个或多个运算符函数，这些函数可以处理和转换 observable 集合中的每个项目。

所以这个例子取 0 到 10 范围内的每个数字，并将其乘以 2。然后，过滤器函数将结果过滤到仅奇数。

Answer 4

RxJS运算符是基于observables基础构建的函数,可以对集合进行复杂的操作.

例如,RxJS定义运营商,如map(),filter(),concat(),和flatMap().

您可以使用管道将操作员链接在一起.管道允许您将多个功能组合到一个功能中.

该pipe()函数将要组合的函数作为其参数,并返回一个新函数,该函数在执行时按顺序运行组合函数.

Answer 5

您必须查看官方的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