Angular, bir siparişle gelmez Kutudan çıkan filtre ile, ancak bir tanesine ihtiyacımız olduğuna karar verirsek kolayca bir tane yapabiliriz. Bununla birlikte, hız ve küçültme konusunda bilmemiz gereken bazı uyarılar var. Aşağıya bakınız.
Basit bir boru şuna benzer.
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)
}
}
Bu kanal bir sıralama işlevini ( fn) kabul eder ve ona bir ilkel diziyi mantıklı bir şekilde sıralayacak varsayılan bir değer verir. İstersek bu sıralama işlevini geçersiz kılma seçeneğimiz var.
Öznitelik adları küçültmeye tabi olduğundan, bir öznitelik adını bir dizge olarak kabul etmez. Kodumuzu küçülttüğümüzde değişecekler, ancak küçülticiler şablon dizesindeki değeri de küçültecek kadar akıllı değil.
İlkelleri sıralama (sayılar ve dizeler)
Varsayılan karşılaştırıcıyı kullanarak bir dizi veya dizeyi sıralamak için bunu kullanabiliriz:
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']
}
Bir dizi nesneyi sıralama
Bir nesne dizisini sıralamak istersek, ona bir karşılaştırma işlevi verebiliriz.
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
}
}
Uyarılar - saf ve saf olmayan borular
Angular 2, saf ve saf olmayan boru konseptine sahiptir.
Saf bir boru , nesne kimliğini kullanarak değişiklik tespitini optimize eder. Bu, borunun yalnızca giriş nesnesinin kimlik değiştirmesi durumunda çalışacağı anlamına gelir, örneğin diziye yeni bir öğe eklersek. Nesnelere inmeyecek. Bu, iç içe geçmiş bir niteliği değiştirirsek: this.cats[2].name = "Fluffy"örneğin, borunun yeniden çalışmayacağı anlamına gelir. Bu, Angular'ın hızlı olmasına yardımcı olur. Açısal borular varsayılan olarak saftır.
Öte yandan saf olmayan bir boru , nesne özelliklerini kontrol edecektir. Bu, potansiyel olarak onu çok daha yavaş hale getirir. Boru işlevinin ne yapacağını garanti edemediği için (örneğin günün saatine göre farklı şekilde sıralanır), asenkron bir olay her meydana geldiğinde saf olmayan bir boru çalışacaktır. Dizi büyükse bu, uygulamanızı önemli ölçüde yavaşlatacaktır.
Yukarıdaki boru saftır. Bu, dizideki nesneler değişmez olduğunda yalnızca çalışacağı anlamına gelir. Bir kediyi değiştirirseniz, tüm kedi nesnesini yenisiyle değiştirmelisiniz.
this.cats[2] = {name:"Tomy"}
Saf özelliğini ayarlayarak yukarıdakileri saf olmayan bir boruya dönüştürebiliriz:
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)
}
}
Bu boru nesnelere inecek, ancak daha yavaş olacaktır. Dikkatle kullanın.