Angular의 pipe () 함수 란?

109

파이프는 템플릿에서 데이터 (형식)를 변환하기위한 필터입니다.

나는 우연히 pipe()다음과 같이 작동합니다. 이 경우이 pipe()기능은 정확히 무엇을 의미합니까?

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

— 디 네시 샤르마
소스

2

github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

— cartant

3

@Ajay 나는이 페이지와 많은 참조를 얻는다 | 사용합니다. rxjs 파이프가 무엇인지 대답하지 않습니다.

— 182764125216

124

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의 기능을 참조하고 있습니다.

— 시바 나약 다라 바스
소스

43

시작 설명에서 말하는 파이프는 예제에서 보여준 파이프와 다릅니다.

Angular (2 | 4 | 5)에서 파이프는 말했듯이 뷰를 포맷하는 데 사용됩니다. Angular의 파이프에 대한 기본적인 이해가 있다고 생각합니다.이 링크에서 자세히 알아볼 수 있습니다 -Angular Pipe Doc

pipe()당신이 예에서 보여는 것입니다 pipe()방법 RxJS 5.5 (RxJS 모든 각도 응용 프로그램의 기본입니다). 에서 Angular5 모든 RxJS의 연산자는 하나의 가져 오기를 사용하여 가져올 수 있으며, 그들은 지금 파이프 방법을 사용하여 결합됩니다.

tap()-RxJS 탭 연산자는 Observable 값을보고 해당 값으로 작업을 수행합니다. 즉, API 요청이 성공하면 tap()운영자는 응답으로 수행 할 모든 기능을 수행합니다. 예에서는 해당 문자열 만 기록합니다.

catchError()-catchError는 정확히 같은 일을하지만 오류 응답을합니다. 오류를 던지거나 오류가 발생하면 일부 함수를 호출하려면 여기에서 수행 할 수 있습니다. 예제에서는 호출 handleError()하고 그 안에 해당 문자열을 기록합니다.

— BhargavG
소스

"시작 설명에서 말하는 파이프 ..."-> 아니요, 다르지 않습니다. ; 제 생각에는 그의 질문이 완벽하게 분명했습니다 (가능한 혼란이 없습니다). 프로그래밍에는 "파이프"라고 할 수있는 많은 개념이 있지만 그의 설명에서 매우 구체적이고 "파이프 함수"라고 부르면서 가능한 모든 혼동을 없앴습니다. 나는 그가 어떻게 그들을 불렀을 수 있었는지 모르겠다.

— bvdb

1

"파이프는 템플릿에서 데이터 (형식)를 변환하기위한 필터입니다." 여기에 그가 날짜와 같은 각도 2 + 파이프에 대해 얘기했다, 각도에 제공 대문자 파이프 (정확히 할 수있는 그는 템플릿 즉, 포맷 데이터 말) 그리고 설명에 그는 RXJS 파이프의 예를 보여주고있다 기능을 . 네,이 두 가지는 완전히 다릅니다.

— BhargavG

나는 그것을 되 찾는다, mea culpa. 그 문구를 간과했습니다. -1을 취소 할 수 있으면 좋겠습니다. :(하지만 안타깝게도 잠겨 있습니다.

— bvdb

그것은 큰 문제가 아닙니다. 모든 의구심을 없애는 것이 행복합니다. 건배 :-)

— BhargavG 2011

15

RxJS 연산자는 컬렉션을 정교하게 조작 할 수 있도록 Observable 기반을 기반으로하는 함수입니다.

예를 들어, RxJS 같은 통신 정의 map(), filter(), concat(),와 flatMap().

파이프를 사용하여 연산자를 함께 연결할 수 있습니다. 파이프를 사용하면 여러 함수를 단일 함수로 결합 할 수 있습니다.

이 pipe()함수는 결합하려는 함수를 인수로 취하고 실행시 구성된 함수를 순서대로 실행하는 새 함수를 반환합니다.

— Manoj
소스

예가 있습니까?

— lofihelsinki

아래 예에서는 필터 및 맵 함수를 파이프했습니다. 이제 두 함수 모두 예제에 제공된대로 순차적으로 실행됩니다. 먼저 결과를 필터링 한 다음 결과를 매핑합니다. 도움이되기를 바랍니다. import {filter, map} from 'rxjs / operators'; const squareOdd = of (1, 2, 3, 4, 5) .pipe (filter (n => n % 2! == 0), map (n => n * n)); // 값을 얻기 위해 구독 squareOdd.subscribe (x => console.log (x));

— manoj

정말 훌륭한 대답이지만, 매우 적은 수의 찬성 투표가 안타깝습니다. 나에게서 +1.

— Ashok kumar

7

공식 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

— 올렉산드르 사추 크
소스

6

매우 다른 두 가지 유형의 파이프 각도-파이프 및 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-파이프

Observable 연산자는 Pipeable 연산자로 알려진 파이프 방법을 사용하여 구성됩니다. 여기에 예가 있습니다.

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를 곱합니다. 그런 다음 필터 함수는 결과를 홀수로만 필터링합니다.

— CharithJ
소스