Angular 2의 pipe () 함수는 무엇입니까?

Angular 2의 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에 파이프 개념이 있고 pipes()RxJS에 기능이 있습니다.

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

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

이 pipe()함수는 결합하려는 함수를 인수로 취하고 실행시 구성된 함수를 순서대로 실행하는 새 함수를 반환합니다.
https://angular.io/guide/rx-library (이 URL에서 파이프를 검색하면 동일한 것을 찾을 수 있습니다)

따라서 귀하의 질문에 따르면 RxJS에서 pipe () 함수를 참조하고 있습니다.

---

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

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

참고 URL : https://stackoverflow.com/questions/48030197/what-is-pipe-function-in-angular-2