कोणीय बॉक्स से बाहर एक आदेश फ़िल्टर के साथ नहीं आता है, लेकिन अगर हम तय करते हैं कि हमें एक की आवश्यकता है तो हम आसानी से एक बना सकते हैं। हालाँकि कुछ कैविएट हैं जिन्हें हमें गति और मिनिफिकेशन के साथ करने के लिए जागरूक होने की आवश्यकता है। निचे देखो।
एक साधारण पाइप कुछ इस तरह दिखेगा।
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
यह पाइप एक प्रकार्य फ़ंक्शन ( fn) को स्वीकार करता है , और इसे एक डिफ़ॉल्ट मान देता है जो एक समझदार तरीके से प्राथमिकताओं की एक सरणी को सॉर्ट करेगा। यदि हम चाहें तो हमारे पास इस प्रकार के कार्य को ओवरराइड करने का विकल्प है।
यह एक विशेषता नाम को एक स्ट्रिंग के रूप में स्वीकार नहीं करता है, क्योंकि विशेषता नाम मीनकरण के अधीन हैं। जब हम अपने कोड को छोटा करेंगे, तो वे बदल जाएंगे, लेकिन टेम्प्लेट स्ट्रिंग में मान को छोटा करने के लिए मिनिफ़ायर पर्याप्त स्मार्ट नहीं हैं।
छँटाई आदिम (संख्या और तार)
हम इसका उपयोग डिफ़ॉल्ट तुलनित्र का उपयोग करके संख्या या स्ट्रिंग्स की एक सरणी को सॉर्ट करने के लिए कर सकते हैं:
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{numbers | sort}}
{{strings | sort}}
`
})
export class CatComponent
numbers:Array<number> = [1,7,5,6]
stringsArray<string> = ['cats', 'hats', 'caveats']
}
वस्तुओं की एक सरणी छाँटना
यदि हम वस्तुओं की एक सरणी को क्रमबद्ध करना चाहते हैं, तो हम इसे एक तुलनित्र कार्य दे सकते हैं।
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{cats | sort:byName}}
`
})
export class CatComponent
cats:Array<Cat> = [
{name: "Missy"},
{name: "Squoodles"},
{name: "Madame Pompadomme"}
]
byName(a,b) {
return a.name > b.name ? 1 : -1
}
}
कैविट्स - शुद्ध बनाम अशुद्ध पाइप
कोणीय 2 में शुद्ध और अशुद्ध पाइप की अवधारणा है।
एक शुद्ध पाइप वस्तु पहचान का उपयोग करके परिवर्तन का पता लगाने का अनुकूलन करता है। इसका मतलब है कि पाइप केवल तभी चलेगा जब इनपुट ऑब्जेक्ट पहचान बदलता है, उदाहरण के लिए यदि हम सरणी में एक नया आइटम जोड़ते हैं। यह वस्तुओं में नहीं उतरेगा। इसका मतलब है कि अगर हम एक नेस्टेड विशेषता को बदलते हैं: this.cats[2].name = "Fluffy"उदाहरण के लिए, पाइप फिर से नहीं चलेगा। इससे कोणीय तेज होने में मदद मिलती है। कोणीय पाइप डिफ़ॉल्ट रूप से शुद्ध होते हैं।
दूसरी ओर एक अशुद्ध पाइप ऑब्जेक्ट विशेषताओं की जांच करेगा। यह संभावित रूप से इसे बहुत धीमा बनाता है। क्योंकि यह गारंटी नहीं दे सकता है कि पाइप फ़ंक्शन क्या करेगा (शायद यह उदाहरण के लिए दिन के समय के आधार पर अलग-अलग क्रमबद्ध होता है), एक अशुद्ध पाइप हर बार एक अतुल्यकालिक घटना होती है। यदि सरणी बड़ी है, तो यह आपके ऐप को काफी धीमा कर देगा।
ऊपर का पाइप शुद्ध है। इसका मतलब है कि यह केवल तभी चलेगा जब सरणी में ऑब्जेक्ट अपरिवर्तनीय हों। यदि आप एक बिल्ली बदलते हैं, तो आपको पूरी बिल्ली ऑब्जेक्ट को एक नए के साथ बदलना होगा।
this.cats[2] = {name:"Tomy"}
हम शुद्ध विशेषता सेट करके एक अशुद्ध पाइप को बदल सकते हैं:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
यह पाइप वस्तुओं में उतरेगा, लेकिन धीमा होगा। सावधानी से प्रयोग करें।