什么是 Angular 中的 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 的概念

我们在 Angular 中有管道概念,在 RxJS 中有pipe()函数。

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

2)RxJS中的pipe()函数:可以使用管道将运算符链接在一起。管道允许您将多个函数组合到单个函数中。

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

所以根据你的问题,你指的是RxJS中的pipe()函数

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

在 Angular(2|4|5) 中,管道用于格式化视图,如您所说。我想你对Angular中的管道有基本的了解,你可以从这个链接中了解更多信息 - 角度管道文档

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

tap()- RxJS 点击运算符将查看可观察值并使用该值执行某些操作。换句话说,在 API 请求成功后,tap()运算符将执行您希望它通过响应执行的任何功能。在示例中,它只会记录该字符串。

catchError()- catchError 做完全相同的事情,但有错误响应。如果你想抛出错误,或者想在收到错误时调用某个函数,你可以在这里做。在示例中,它将调用handleError(),在其中,它将只记录该字符串。

两种非常不同类型的管道 角度 - 管道和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。然后,过滤器功能将结果过滤到仅奇数。

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

相关内容

  • 没有找到相关文章

最新更新