[angular] 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에는 파이프 개념이 있고 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 모든 각도 응용 프로그램의 기본입니다). 에서 Angular5 모든 RxJS의 연산자는 하나의 가져 오기를 사용하여 가져올 수 있으며, 그들은 지금 파이프 방법을 사용하여 결합됩니다.
tap()-RxJS 탭 연산자는 Observable 값을보고 해당 값으로 작업을 수행합니다. 즉, API 요청이 성공하면 tap()운영자는 응답으로 수행 할 모든 기능을 수행합니다. 예에서는 해당 문자열 만 기록합니다.
catchError()-catchError는 정확히 같은 일을하지만 오류 응답을합니다. 오류를 던지거나 오류가 발생하면 일부 함수를 호출하려면 여기에서 수행 할 수 있습니다. 예제에서는 호출 handleError()하고 그 안에 해당 문자열을 기록합니다.
답변
RxJS 연산자는 컬렉션을 정교하게 조작 할 수 있도록 Observable 기반을 기반으로하는 함수입니다.
예를 들어, 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
}
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를 곱합니다. 그런 다음 필터 함수는 결과를 홀수로만 필터링합니다.
답변
