দুটি খুব আলাদা ধরণের পাইপ কৌণিক - পাইপ এবং আরএক্সজেএস - পাইপ
কৌণিক-পাইপ
একটি পাইপ ডেটা ইনপুট হিসাবে গ্রহণ করে এবং এটি একটি পছন্দসই আউটপুটে রূপান্তর করে। এই পৃষ্ঠায়, আপনি উপাদানগুলির জন্মদিনের সম্পত্তিটিকে মানব-বান্ধব তারিখে রূপান্তর করতে পাইপ ব্যবহার করবেন।
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
পর্যবেক্ষণযোগ্য হ'ল যে কোনও ভেরিয়েবলের জন্য, আমরা এক বা একাধিক অপারেটর ফাংশনে পাস করার জন্য .pip () পদ্ধতিটি ব্যবহার করতে পারি যা পর্যবেক্ষণযোগ্য সংগ্রহের প্রতিটি আইটেমটিতে কাজ করতে পারে এবং রূপান্তর করতে পারে।
সুতরাং এই উদাহরণটি প্রতিটি সংখ্যা 0 থেকে 10 এর পরিসীমাতে নেয় এবং এটি 2 দিয়ে গুণ করে Then তারপরে, ফিল্টারটি কেবলমাত্র বিজোড় সংখ্যাগুলিতে ফলাফল ফিল্টার করতে ফাংশন করে।