ฟังก์ชัน pipe () ใน Angular คืออะไร

110

ไปป์เป็นตัวกรองสำหรับการแปลงข้อมูล (รูปแบบ) ในเทมเพลต

ฉันเจอpipe()ฟังก์ชันดังต่อไปนี้ pipe()ฟังก์ชันนี้หมายความว่าอย่างไรในกรณีนี้?

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

— Dinesh Sharma
แหล่งที่มา

2

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

— cartant

4

@Ajay ฉันได้รับหน้านี้และข้อมูลอ้างอิงมากมายถึง | ใช้ ซึ่งไม่ตอบโจทย์ว่าท่อ rxjs คืออะไร.

— 182764125216

125

อย่าสับสนกับแนวคิดของ Angular และ RxJS

เรามีแนวคิดท่อในเชิงมุมและpipe()ฟังก์ชันใน RxJS

1) Pipes in Angular : ท่อรับข้อมูลเป็นอินพุตและแปลงเป็นเอาต์พุตที่ต้องการ
https://angular.io/guide/pipes

2) pipe()ฟังก์ชันใน RxJS : คุณสามารถใช้ไพพ์เพื่อเชื่อมโยงตัวดำเนินการเข้าด้วยกัน ท่อช่วยให้คุณรวมฟังก์ชันต่างๆไว้ในฟังก์ชันเดียว

pipe()ฟังก์ชั่นใช้เวลาเป็นข้อโต้แย้งของฟังก์ชั่นที่คุณต้องการที่จะรวมและผลตอบแทนฟังก์ชั่นใหม่ที่เมื่อดำเนินการเรียกใช้ฟังก์ชั่นประกอบด้วยลำดับ
https://angular.io/guide/rx-library (ค้นหาไปป์ใน URL นี้คุณจะพบสิ่งเดียวกัน)

ตามคำถามของคุณคุณกำลังอ้างถึงpipe()ฟังก์ชันใน RxJS

— พระศิวะนาคดาราวาท
แหล่งที่มา

44

ท่อที่คุณกำลังพูดถึงในคำอธิบายเริ่มต้นนั้นแตกต่างจากท่อที่คุณแสดงในตัวอย่าง

ใน Angular (2 | 4 | 5) Pipes ใช้เพื่อจัดรูปแบบมุมมองตามที่คุณกล่าว ฉันคิดว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับท่อใน Angular คุณสามารถเรียนรู้เพิ่มเติมได้จากลิงค์นี้ - Angular Pipe Doc

ที่pipe()คุณแสดงในตัวอย่างคือpipe()วิธีการของRxJS 5.5 (RxJS เป็นค่าเริ่มต้นสำหรับแอป Angular ทั้งหมด) ในAngular5ทั้งหมดRxJSผู้ประกอบการสามารถนำเข้าโดยใช้การนำเข้าเพียงครั้งเดียวและพวกเขาจะรวมกันตอนนี้ใช้วิธีการท่อ

tap()- ตัวดำเนินการแตะ RxJS จะดูค่าที่สังเกตได้และทำอะไรบางอย่างกับค่านั้น กล่าวอีกนัยหนึ่งคือหลังจากคำขอ API สำเร็จtap()โอเปอเรเตอร์จะทำหน้าที่ใด ๆ ที่คุณต้องการให้ดำเนินการกับการตอบสนอง ในตัวอย่างก็จะบันทึกสตริงนั้น

catchError()- catchError ทำสิ่งเดียวกัน แต่มีการตอบสนองข้อผิดพลาด หากคุณต้องการส่งข้อผิดพลาดหรือต้องการเรียกใช้ฟังก์ชันบางอย่างหากคุณได้รับข้อผิดพลาดคุณสามารถทำได้ที่นี่ ในตัวอย่างมันจะเรียกhandleError()และข้างในนั้นก็จะบันทึกสตริงนั้น

— BhargavG
แหล่งที่มา

"ท่อที่คุณกำลังพูดถึงในคำอธิบายเริ่มต้น ... " -> ไม่ต่างกัน ; ในความคิดของฉันคำถามของเขาชัดเจนอย่างสมบูรณ์ (ไม่มีความสับสนในสิ่งที่เป็นไปได้) มีแนวคิดมากมายในการเขียนโปรแกรมที่อาจเรียกว่า "ไพพ์" แต่ด้วยความเฉพาะเจาะจงในคำอธิบายของเขาและเรียกสิ่งเหล่านี้ว่า "ฟังก์ชันไพพ์" ทำให้เขาขจัดความสับสนที่อาจเกิดขึ้นได้ทั้งหมด ฉันไม่รู้ว่าเขาเรียกพวกเขาได้อย่างไร

— bvdb

1

"ไปป์คือตัวกรองสำหรับการแปลงข้อมูล (รูปแบบ) ในเทมเพลต" ที่นี่เขาได้พูดคุยเกี่ยวกับท่อในเชิงมุม 2+ เช่นวันท่อพิมพ์ใหญ่ให้ไว้ในเชิงมุม (ซึ่งว่าทำในสิ่งที่เขากล่าวว่ารูปแบบข้อมูลเช่นในแม่แบบ) และในคำอธิบายของเขาได้แสดงให้เห็นตัวอย่างของท่อ RXJS ฟังก์ชั่น ใช่แล้ว 2 สิ่งนั้นแตกต่างกันโดยสิ้นเชิง

— BhargavG

ฉันเอามันกลับแม่กูลา มองข้ามวลีนั้นไป ฉันหวังว่าฉันจะเลิกทำ -1 ได้ :( แต่มันถูกล็อคอย่างน่าเสียดาย

— bvdb

นั่นไม่ใช่เรื่องใหญ่ มีความสุขที่ได้เคลียร์ข้อสงสัยทั้งหมด ไชโย :-)

— BhargavG

15

RxJS Operators เป็นฟังก์ชันที่สร้างขึ้นจากรากฐานที่สังเกตได้เพื่อให้สามารถจัดการคอลเลกชันที่ซับซ้อนได้

ยกตัวอย่างเช่น RxJS กำหนดผู้ประกอบการเช่นmap(), filter(), และconcat()flatMap()

คุณสามารถใช้ไพพ์เพื่อเชื่อมโยงตัวดำเนินการเข้าด้วยกัน ท่อช่วยให้คุณรวมฟังก์ชันต่างๆไว้ในฟังก์ชันเดียว

pipe()ฟังก์ชั่นใช้เวลาเป็นข้อโต้แย้งของฟังก์ชั่นที่คุณต้องการที่จะรวมและผลตอบแทนฟังก์ชั่นใหม่ที่เมื่อดำเนินการเรียกใช้ฟังก์ชั่นประกอบด้วยลำดับ

— มาโนช
แหล่งที่มา

คุณมีตัวอย่างหรือไม่?

— lofihelsinki

ในตัวอย่างด้านล่างเราได้วางฟังก์ชั่นตัวกรองและแผนที่ ตอนนี้ทั้งสองฟังก์ชันจะได้รับการดำเนินการตามลำดับตามที่ให้ไว้ในตัวอย่าง ขั้นแรกจะกรองผลลัพธ์จากนั้นจะแมปผลลัพธ์ หวังว่ามันจะช่วยได้ นำเข้า {filter, map} จาก "rxjs / operator"; const squareOdd = จาก (1, 2, 3, 4, 5) .pipe (ตัวกรอง (n => n% 2! == 0), แผนที่ (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 https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44

ในระยะสั้น. ท่อ () ช่วยให้สามารถเชื่อมโยงตัวดำเนินการที่เป็นท่อได้หลายตัว

ตั้งแต่เวอร์ชัน 5.5 RxJS ได้ส่ง "ตัวดำเนินการที่สามารถใช้ท่อได้" และเปลี่ยนชื่อตัวดำเนินการบางตัว:

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

— Oleksandr Sachuk
แหล่งที่มา

6

Pipes Angularสองประเภทที่แตกต่างกันมาก- PipesและRxJS - Pipes

เชิงมุมท่อ

ไปป์รับข้อมูลเป็นอินพุตและแปลงเป็นเอาต์พุตที่ต้องการ ในหน้านี้คุณจะใช้ไปป์เพื่อเปลี่ยนคุณสมบัติวันเกิดของส่วนประกอบให้เป็นวันที่ที่เป็นมิตรกับมนุษย์

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 - ท่อ

ตัวดำเนินการที่สังเกตได้ประกอบด้วยวิธีการท่อที่เรียกว่า Pipeable Operators นี่คือตัวอย่าง

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

สำหรับตัวแปรใด ๆ ที่มีค่าที่สังเกตได้เราสามารถใช้เมธอด. pip () เพื่อส่งผ่านฟังก์ชันตัวดำเนินการหนึ่งหรือหลายตัวที่สามารถทำงานและแปลงแต่ละรายการในคอลเลกชันที่สังเกตได้

ตัวอย่างนี้จึงนำตัวเลขแต่ละตัวอยู่ในช่วง 0 ถึง 10 และคูณด้วย 2 จากนั้นฟังก์ชันตัวกรองเพื่อกรองผลลัพธ์ให้เหลือเฉพาะจำนวนคี่

— ชาริ ธ
แหล่งที่มา