Angular에서 파이프() 함수란 무엇입니까?

Angular에서 파이프() 함수란 무엇입니까?

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

우연히 발견했습니다.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에서 기능합니다.

각진 파이프:파이프는 데이터를 입력으로 받아 원하는 출력으로 변환합니다.
https://angular.io/guide/pipes

RxJS의 함수: 파이프를 사용하여 연산자를 함께 연결할 수 있습니다pipe().파이프를 사용하면 여러 기능을 하나의 기능으로 결합할 수 있습니다.

그pipe()function은 결합할 함수를 인수로 사용하고, 실행 시 구성된 함수를 순서대로 실행하는 새 함수를 반환합니다.
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 탭 연산자는 관찰 가능한 값을 보고 해당 값으로 작업을 수행합니다.즉, 성공적인 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()function은 결합할 함수를 인수로 사용하고, 실행 시 구성된 함수를 순서대로 실행하는 새 함수를 반환합니다.

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

언급URL : https://stackoverflow.com/questions/48030197/what-is-pipe-function-in-angular