Angular không đi kèm với đơn đặt hàng Bằng cách lọc ra khỏi hộp, nhưng nếu chúng tôi quyết định cần một cái thì chúng tôi có thể dễ dàng tạo ra một cái. Tuy nhiên, có một số lưu ý mà chúng ta cần lưu ý đối với tốc độ và sự thu nhỏ. Xem bên dưới.
Một đường ống đơn giản sẽ trông giống như thế này.
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)
}
}
Đường ống này chấp nhận một hàm sắp xếp ( fn) và cung cấp cho nó một giá trị mặc định sẽ sắp xếp một mảng nguyên thủy theo cách hợp lý. Chúng tôi có tùy chọn ghi đè chức năng sắp xếp này nếu chúng tôi muốn.
Nó không chấp nhận tên thuộc tính là một chuỗi, vì tên thuộc tính có thể được rút gọn. Chúng sẽ thay đổi khi chúng ta giảm thiểu mã của mình, nhưng các bộ thu nhỏ không đủ thông minh để giảm thiểu giá trị trong chuỗi mẫu.
Sắp xếp nguyên thủy (số và chuỗi)
Chúng tôi có thể sử dụng điều này để sắp xếp một mảng số hoặc chuỗi bằng cách sử dụng bộ so sánh mặc định:
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']
}
Sắp xếp một mảng đối tượng
Nếu chúng ta muốn sắp xếp một mảng các đối tượng, chúng ta có thể cung cấp cho nó một hàm so sánh.
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
}
}
Lưu ý - đường ống tinh khiết và không tinh khiết
Angular 2 có một khái niệm về đường ống tinh khiết và không tinh khiết.
Một đường ống thuần túy tối ưu hóa việc phát hiện thay đổi bằng cách sử dụng nhận dạng đối tượng. Điều này có nghĩa là đường ống sẽ chỉ chạy nếu đối tượng đầu vào thay đổi danh tính, ví dụ: nếu chúng ta thêm một mục mới vào mảng. Nó sẽ không đi xuống thành các đối tượng. Điều này có nghĩa là nếu chúng ta thay đổi một thuộc tính lồng nhau: this.cats[2].name = "Fluffy"ví dụ: đường ống sẽ không chạy lại. Điều này giúp Angular nhanh chóng. Theo mặc định, ống góc là nguyên chất.
Mặt khác, một đường ống không tinh khiết sẽ kiểm tra các thuộc tính của đối tượng. Điều này có thể làm cho nó chậm hơn nhiều. Bởi vì nó không thể đảm bảo chức năng của đường ống sẽ làm gì (có lẽ nó sắp xếp khác nhau dựa trên thời gian trong ngày chẳng hạn), một đường ống không tinh khiết sẽ chạy mỗi khi sự kiện không đồng bộ xảy ra. Điều này sẽ làm chậm ứng dụng của bạn đáng kể nếu mảng lớn.
Đường ống trên là nguyên chất. Điều này có nghĩa là nó sẽ chỉ chạy khi các đối tượng trong mảng là bất biến. Nếu bạn thay đổi một con mèo, bạn phải thay thế toàn bộ đồ vật con mèo bằng một vật mới.
this.cats[2] = {name:"Tomy"}
Chúng tôi có thể thay đổi ở trên thành một đường ống không tinh khiết bằng cách đặt thuộc tính pure:
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)
}
}
Đường ống này sẽ đi xuống các đối tượng, nhưng sẽ chậm hơn. Sử dụng cẩn thận.