कोणीय में पाइप () फ़ंक्शन क्या है


110

टेम्पलेट में डेटा (प्रारूप) बदलने के लिए पाइप फिल्टर हैं।

मैं pipe()नीचे दिए गए समारोह में आया था । pipe()इस मामले में इस फ़ंक्शन का वास्तव में क्या मतलब है?

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


3
@ अजय मुझे यह पृष्ठ और संदर्भों का एक समूह मिलता है | का उपयोग करता है। जो जवाब नहीं देता कि rxjs पाइप क्या हैं।
182764125216

जवाबों:


125

कोणीय और RxJS की अवधारणाओं से भ्रमित न हों

हमारे पास pipe()RxJS में कोणीय और कार्य में पाइप की अवधारणा है ।

1) पाइप्स इन एंगुलर : एक पाइप इनपुट के रूप में डाटा को लेता है और इसे वांछित आउटपुट में बदलता है
https://angular.io/guide/pipes

2) pipe()RxJS में कार्य : आप ऑपरेटरों को एक साथ जोड़ने के लिए पाइप का उपयोग कर सकते हैं। पाइप आपको एक फ़ंक्शन में कई फ़ंक्शन जोड़ते हैं।

pipe()समारोह अपने तर्कों के रूप में कार्य आप संयोजित करना चाहते हैं लगता है, और एक नया कार्य है कि, जब मार डाला, अनुक्रम में बना कार्यों चलाता देता है।
https://angular.io/guide/rx-library (इस URL में पाइप की खोज करें, आप वही पा सकते हैं)

तो आपके प्रश्न के अनुसार, आप pipe()RxJS में फ़ंक्शन का उल्लेख कर रहे हैं


44

शुरुआती विवरण में आप जिन पाइपों के बारे में बात कर रहे हैं, वे उस पाइप से अलग हैं जो आपने उदाहरण में दिखाया था।

कोणीय (2 | 4 | 5) में पाइप्स का उपयोग प्रारूप को देखने के लिए किया जाता है जैसा आपने कहा था। मुझे लगता है कि आपको कोणीय में पाइप की एक बुनियादी समझ है, आप इस लिंक से इसके बारे में अधिक जान सकते हैं - कोणीय पाइप डॉक

pipe()आप उदाहरण में दिखाया गया है pipe()की विधि RxJS 5.5 (RxJS सभी कोणीय क्षुधा के लिए डिफ़ॉल्ट है)। में Angular5 सभी RxJS ऑपरेटरों एकल आयात का उपयोग आयात किया जा सकता है और वे अब पाइप पद्धति का उपयोग करके जोड़ दिया जाता है।

tap()- RxJS टैप ऑपरेटर ऑब्जर्वेबल वैल्यू को देखेगा और उस वैल्यू के साथ कुछ करेगा। दूसरे शब्दों में, एक सफल एपीआई अनुरोध के बाद, tap()ऑपरेटर कोई भी फ़ंक्शन करेगा जो आप चाहते हैं कि वह प्रतिक्रिया के साथ प्रदर्शन करे। उदाहरण में, यह सिर्फ उस स्ट्रिंग को लॉग करेगा।

catchError()- catchError बिल्कुल वही काम करता है लेकिन त्रुटि प्रतिक्रिया के साथ। यदि आप एक त्रुटि फेंकना चाहते हैं या कुछ फ़ंक्शन कॉल करना चाहते हैं यदि आपको कोई त्रुटि मिलती है, तो आप इसे यहां कर सकते हैं। उदाहरण में, यह कॉल करेगा handleError()और उसके अंदर, यह बस उस स्ट्रिंग को लॉग करेगा।


"जिन पाइपों के बारे में आप शुरुआती विवरण में बात कर रहे हैं ..." -> नहीं वे अलग नहीं हैं। ; मेरी राय में उनका प्रश्न पूरी तरह से स्पष्ट था (कोई भ्रम नहीं है कि ऐसा क्या संभव है)। प्रोग्रामिंग में बहुत सारी अवधारणाएं हैं जिन्हें "पाइप" कहा जा सकता है, लेकिन उनके विवरण में बहुत विशिष्ट होने के नाते, और उन्हें "पाइप फ़ंक्शन" कहते हुए उन्होंने सभी संभावित भ्रम को समाप्त कर दिया। मुझे नहीं पता कि वह उन्हें कैसे बुला सकता था।
bvdb

1
"पाइप टेम्पलेट में डेटा (प्रारूप) बदलने के लिए फ़िल्टर हैं।" यहां वह एंगुलर 2+ में पाइप के बारे में बात कर रहे थे, जैसे तारीख, एंगुलर में प्रदान किए गए अपरकेस पाइप (जो बिल्कुल वही करते हैं जो उन्होंने टेम्पलेट में प्रारूप डेटा कहते हैं) और विवरण में उन्होंने आरएक्सजेएस पाइप फ़ंक्शन का उदाहरण दिखाया है । तो हाँ उन 2 चीजें पूरी तरह से अलग हैं।
भार्गव

मैं इसे वापस लेता हूं, मैया पुलपा। उस वाक्यांश की अनदेखी की। काश मैं -1 को पूर्ववत कर सकता। :( लेकिन यह दुर्भाग्य से बंद है।
bvdb

यह कोई बड़ी बात नहीं है। खुशी है कि यह सभी संदेहों को दूर करता है। चियर्स :-)
भार्गव

15

RxJS ऑपरेटर वे कार्य हैं जो संग्रह के परिष्कृत हेरफेर को सक्षम करने के लिए वेधशाला नींव पर निर्माण करते हैं।

उदाहरण के लिए, RxJS जैसे ऑपरेटरों को परिभाषित करता है map(), filter(), concat(), और flatMap()

आप ऑपरेटरों को एक साथ जोड़ने के लिए पाइप का उपयोग कर सकते हैं। पाइप आपको एक फ़ंक्शन में कई फ़ंक्शन जोड़ते हैं।

pipe()समारोह अपने तर्कों के रूप में कार्य आप संयोजित करना चाहते हैं लगता है, और एक नया कार्य है कि, जब मार डाला, अनुक्रम में बना कार्यों चलाता देता है।


आपके पास कोई उदाहरण है?
लोफिहेलसिंकी

नीचे दिए गए उदाहरण में हमने फिल्टर और मैप फ़ंक्शन को पाइप किया है। अब दोनों फ़ंक्शन को क्रमिक रूप से निष्पादित किया जाएगा जैसा कि उदाहरण में प्रदान किया गया है। पहले यह परिणाम को फ़िल्टर करेगा और फिर यह परिणामों को मैप करेगा। आशा है कि यह मदद करेगा। 'rxjs / ऑपरेटर्स' से {फ़िल्टर, मैप} आयात करें; const squareOdd = of (1, 2, 3, 4, 5)। पिप (फ़िल्टर (n => n% 2! == 0), मानचित्र (n => n * n)); // मान प्राप्त करने के लिए सदस्यता लें squareOdd.subscribe (x => कंसोल.लॉग (x));
मनोज

वास्तव में उत्कृष्ट उत्तर, लेकिन यह दुर्भाग्यपूर्ण है कि बहुत कम संख्या में अप-वोट। मुझ से +1।
अशोक कुमार

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 आरएक्सजेएस ने "पाइप करने योग्य ऑपरेटरों" को भेज दिया और कुछ ऑपरेटरों का नाम बदल दिया:

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

6

पाइप्स कोणीय के दो बहुत अलग प्रकार - पाइप्स और आरएक्सजेएस - पाइप्स

कोणीय-पाइप

एक पाइप इनपुट के रूप में डेटा को लेता है और इसे वांछित आउटपुट में बदल देता है। इस पृष्ठ में, आप घटक के जन्मदिन की संपत्ति को मानव-अनुकूल तिथि में बदलने के लिए पाइप का उपयोग करेंगे।

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
}

आरएक्सजेएस - पाइप

देखने योग्य ऑपरेटरों को पाइप करने योग्य ऑपरेटरों के रूप में जाना जाता है एक पाइप विधि का उपयोग करके बनाया गया है। यहाँ एक उदाहरण है।

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 से गुणा करता है। फिर, परिणाम को केवल विषम संख्या तक फ़िल्टर करने के लिए फ़िल्टर फ़ंक्शन।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.