Pipe trong Angular
Mục lục
Pipes là gì?
Pipe trong Angular là như một công cụ linh hoạt, giúp chúng ta chuyển đổi dữ liệu từ dạng này sang dạng khác một cách dễ dàng. Nó tương tự như một function nhận đầu vào và trả về một kết quả sau khi xử lý.
Ví dụ, khi chúng ta nhận dữ liệu thời gian từ máy chủ dưới dạng chuỗi ISO như “2020-06-24T09:00:00.000Z” (tương ứng với 24 tháng 6, 5h chiều theo giờ Singapore), hiển thị trực tiếp cho người dùng bằng chuỗi này không thực sự hữu ích. Chúng ta cần chuyển đổi chuỗi này thành một định dạng mà người dùng có thể hiểu, ví dụ như “Jun 24, 2020, 5:00:00 PM”.
Angular cung cấp các pipes để thực hiện việc này. Bạn có thể viết một hàm thông thường nhận đầu vào là thời gian và trả về định dạng mong muốn. Hoặc bạn có thể tận dụng pipe, cũng nhận đầu vào và trả về đầu ra nhưng có thể tái sử dụng dễ dàng hơn.
Lợi ích lớn của việc sử dụng pipe là khả năng tái sử dụng. Khi có nhiều trang cần hiển thị ngày giờ, việc sử dụng pipe sẽ giúp tiết kiệm thời gian và công sức hơn so với việc viết các hàm riêng lẻ cho từng trang.
Dùng pipe trong angular như thế nào?
Pipe trong Angular là công cụ mạnh mẽ giúp chúng ta biến đổi dữ liệu để hiển thị theo cách mong muốn. Angular cung cấp sẵn một số pipes như ‘date’, ‘uppercase’, ‘lowercase’… để sử dụng ngay lập tức từ thư viện @angular/common.
Tuy nhiên, khi không đủ với các pipes có sẵn, bạn cũng có thể tự viết các pipes tùy chỉnh dựa trên nhu cầu cụ thể của mình.
Việc sử dụng pipe rất đơn giản, bạn chỉ cần chèn pipe sau dấu “|”. Ví dụ, nếu bạn có một biến “now” trong component của mình và muốn hiển thị ngày tháng theo định dạng khác nhau:
<div>{{ now | date }}</div>
<!-- Kết quả: Jun 24, 2020 -->
<div>{{ now | date:'medium'}}</div>
<!-- Kết quả: Jun 24, 2020, 5:00:00 PM -->Pipe và parameters trong Angular
Pipe trong Angular không chỉ giúp biến đổi dữ liệu mà còn cho phép chúng ta truyền các tham số bổ sung để tinh chỉnh việc xử lý dữ liệu.
Cú pháp sử dụng pipe với các tham số là:
{{ interpolated_value | pipe_name:parameter1:parameter2:...:parameterN }}Ví dụ, khi sử dụng pipe ‘date’ để định dạng ngày tháng, chúng ta có thể truyền thêm các tham số như ‘medium’, ‘short’,… để thay đổi định dạng hiển thị:
{{ now | date:'medium' }}
<!-- Kết quả: Jun 24, 2020 -->
{{ now | date:'short' }}
<!-- Kết quả: 6/24/20, 5:00 PM -->Điều đặc biệt là bạn có thể truyền vào pipe bất kỳ số lượng tham số nào cần thiết để tùy chỉnh xử lý dữ liệu. Cú pháp này cho phép bạn điều chỉnh cách dữ liệu được hiển thị một cách linh hoạt và dễ dàng.
Chaining pipe
Pipe trong Angular cho phép chúng ta kết hợp nhiều pipe lại với nhau để biến đổi dữ liệu một cách tuần tự. Cú pháp để chaining pipe có dạng:
{{ giá_trị | pipe_1 | pipe_2 | ... | pipe_n }}Quá trình này diễn ra từ trái qua phải, nghĩa là giá trị sẽ được xử lý qua từng pipe theo thứ tự mà chúng ta khai báo.
Ví dụ, nếu chúng ta có một giá trị ‘now’ đang chứa ngày và thời gian, và muốn hiển thị nó dưới dạng chữ hoa, chúng ta có thể kết hợp pipe ‘date’ và ‘uppercase’ như sau:
{{ now | date:'medium' | uppercase }}Trong ví dụ trên, giá trị ‘now’ sau khi qua pipe ‘date’ sẽ trở thành ‘Jun 24, 2020, 5:00:00 PM’, sau đó nó sẽ được đưa qua pipe ‘uppercase’ để biến thành ‘JUN 24, 2020, 5:00:00 PM’.
Điều này đồng nghĩa rằng kết quả cuối cùng mà chúng ta nhận được sẽ là giá trị đã được xử lý qua tất cả các pipe theo thứ tự mà chúng ta xác định.
Các pipe có sẵn đi kèm với Angular (built-in pipe)
Angular có sẵn một loạt các pipes được kết hợp trong CommonModule từ package @angular/common, giúp ta dễ dàng biến đổi và hiển thị dữ liệu theo nhiều cách khác nhau. Dưới đây là một số pipes phổ biến mà ta có thể sử dụng:
| Pipe | Mô tả |
DatePipe | Định dạng ngày tháng. |
UpperCasePipe | Chuyển đổi văn bản thành chữ in hoa. |
LowerCasePipe | Chuyển đổi văn bản thành chữ in thường. |
CurrencyPipe | Hiển thị giá trị tiền tệ với định dạng tương ứng. |
DecimalPipe | Hiển thị số với định dạng số thập phân. |
PercentPipe | Hiển thị giá trị dưới dạng phần trăm. |
JsonPipe | Hiển thị dữ liệu dưới dạng JSON. |
AsyncPipe | Hỗ trợ hiển thị giá trị của các Observable và tự động huỷ đăng ký khi view không còn tồn tại. |
Viết custom pipe
Viết custom pipe trong Angular giúp tái sử dụng logic giữa các component một cách dễ dàng. Ví dụ, trong ứng dụng, chúng ta cần hiển thị tiêu đề của form dựa trên việc người dùng đang thêm hay chỉnh sửa một mục nào đó.
Thường thì, chúng ta sẽ kiểm tra nếu có itemId trong URL thì đó là trang chỉnh sửa (Edit), còn không có itemId thì đó là trang thêm mới (Add). Tuy nhiên, một lỗi nhỏ như việc gõ sai từ “Add” thành “Adđ” đã khiến mình nảy ra ý tưởng viết một pipe nhỏ giúp tránh lỗi tương tự sau này.
Đầu tiên, để viết một pipe, mình cần tạo một class thực hiện interface PipeTransform. Interface này chỉ chứa một method là transform.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'appTitle',
})
export class AppTitlePipe implements PipeTransform {
transform(resourceId: string): string {
return resourceId ? 'Edit' : 'Add';
}
}Phương thức transform đơn giản chỉ kiểm tra nếu resourceId có giá trị thì trả về “Edit”, ngược lại trả về “Add”.
Tiếp theo, mình thêm decorator @Pipe cho class để định nghĩa pipe này. Trong decorator, mình đặt tên cho pipe là appTitle.
Sau khi đã tạo xong pipe, mình có thể sử dụng nó trong template của Angular như sau:
<h2 class="inbox-title">{{ userId | appTitle }} User</h2>Lưu ý rằng tên của pipe (appTitle) phải được đặt trong mảng declarations của module mà bạn muốn sử dụng nó, nếu không Angular sẽ báo lỗi.Tên của class pipe nên tuân theo quy tắc UpperCamelCase, còn tên của pipe thì theo quy tắc camelCase và không sử dụng dấu gạch ngang (-) trong tên.
Thay đổi pipe parameters
Với ví dụ trước, mình muốn thay đổi tiêu đề khi mở các form thêm và chỉnh sửa. Thay vì sử dụng “Add” và “Edit” mặc định, mình muốn thay thành “Set Item” khi thêm và “Change” khi chỉnh sửa.
Để làm điều này, mình đã cải tiến method transform của pipe để có thể nhận vào hai tham số mới.
transform(
resourceId: string,
addText: string = 'Add',
editText: string = 'Edit'
): string {
return resourceId ? editText : addText;
}Khi sử dụng pipe trên UI, mình có thể truyền các tham số bổ sung bằng cách sử dụng dấu hai chấm “:”.
{{ userId | appTitle:'Set Item':'Change'}}Trong method transform, resourceId là giá trị từ biến mình đang sử dụng pipe (userId trong trường hợp này). Còn addText và editText sẽ lần lượt nhận các giá trị mà mình truyền vào từ pipe khi gọi nó trên UI. Ví dụ: "Set Item" sẽ là giá trị của addText, "Change" sẽ là giá trị của editText.
Phát hiện thay đổi với data binding in pipes
Primitive type trong angular
Trong Angular, khi sử dụng data binding trong pipes như trong trường hợp của pipe appTitle, các giá trị cơ bản như string sẽ được theo dõi để phát hiện sự thay đổi. Điều này có nghĩa là khi giá trị của đối số được truyền vào pipe thay đổi, pipe sẽ tự động cập nhật UI tương ứng.
Ví dụ, trong đoạn code dưới đây, mình có một biến userIdChangeAfterFiveSeconds là một string. Khi giá trị của biến này thay đổi sau 5 giây, pipe appTitle sẽ phát hiện sự thay đổi và cập nhật giao diện người dùng.
export class PipeExampleComponent implements OnInit {
userIdChangeAfterFiveSeconds = "14324";
time$: Observable<number> = timer(0, 1000).pipe(
map((val) => 5 - (val + 1)),
startWith(5),
finalize(() => {
this.userIdChangeAfterFiveSeconds = "";
}),
takeWhile((val) => val >= 0)
);
}<p>
Set userId to empty string after {{ timer | async }} seconds, notice the text
"Edit" will be set to "Add"
</p>
<pre ngNonBindable>{{ userIdChangeAfterFiveSeconds | appTitle}}</pre>
<div>Form title: {{ userIdChangeAfterFiveSeconds | appTitle}} User</div>Trong ví dụ trên, biến userIdChangeAfterFiveSeconds ban đầu có giá trị là "14324", sau 5 giây, nó sẽ được cập nhật thành một chuỗi rỗng "". Khi giá trị này thay đổi, pipe appTitle sẽ tự động cập nhật giao diện người dùng mà không cần thao tác thêm.
Reference type
Trong Angular, khi thay đổi giá trị của kiểu dữ liệu cơ bản như string, boolean, number, pipe tự động cập nhật UI theo giá trị mới. Nhưng đối với các kiểu dữ liệu tham chiếu như object hoặc array, cách hoạt động của pipe có điều đặc biệt.
Ví dụ, nếu mình có một mảng chứa thông tin về người dùng và một pipe isAdult để lọc ra những người lớn hơn 18 tuổi, pipe này hoạt động như mong đợi:
@Pipe({
name: "isAdult",
})
export class IsAdultPipe implements PipeTransform {
transform(arr: User[]): User[] {
return arr.filter((x) => x.age > 18);
}
}
users: User[] = [
// ...các thông tin về người dùng
];Và trong giao diện:
<div class="row">
<div class="col-xs-6">
<h4>Full user list</h4>
<div *ngFor="let user of users">{{ user.name }}</div>
</div>
<div class="col-xs-6">
<div class="ml-4">
<h4>Adult user list</h4>
<div *ngFor="let user of users | isAdult">{{ user.name }}</div>
</div>
::
</div>
</div>Như bạn đã thấy, danh sách người trưởng thành không hiển thị người có tên là Tuan Anh, điều này chứng tỏ pipe isAdult hoạt động đúng như kỳ vọng.
Tuy nhiên, khi mình thêm một người dùng mới với tuổi lớn hơn 18 vào mảng users như sau:
addUser() {
this.users.push(this.newUser);
this.newUser = new User();
}Phần danh sách người lớn không tự cập nhật lại khi mình thêm người dùng mới. Điều này xảy ra vì pipe được định nghĩa với tính chất tinh khiết (pure), nghĩa là pipe chỉ được kích hoạt khi phát hiện sự thay đổi với giá trị đầu vào là primitive hoặc thay đổi reference đối với object.
Để sửa, có hai cách:
- Cập nhật tham chiếu biến: Thay vì thêm một phần tử mới vào mảng, gán mảng
usersbằng một mảng mới chứa tất cả các phần tử cũ và phần tử mới thêm vào. Điều này đảm bảo reference của mảng thay đổi, kích hoạt pipe và cập nhật giao diện.
addUserByUpdateReference() {
this.users = [...this.users, this.newUser];
this.newUser = new User();
} 2. Sử dụng pipe không tinh khiết (impure): Bạn có thể cấu hình pipe để không tinh khiết (pure) bằng cách thiết lập thuộc tính pure trong decorator là false. Mặc định, pipe luôn được xác định là tinh khiết.
@Pipe({
name: 'isAdult',
pure: false
})Tuy nhiên, khi sử dụng pipe không tinh khiết, cần cẩn thận vì việc kiểm tra từng phần tử trong mảng hoặc từng thuộc tính trong object để xác định sự thay đổi có thể ảnh hưởng đến hiệu suất của ứng dụng, đặc biệt khi dữ liệu lớn.
