Pipes Archives - Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển

ThanNT (PRHO - CTV) — Thu, 21 Sep 2023 04:47:06 +0000

Trong bài viết này, hãy cùng tìm hiểu định nghĩa v�?Pipes và cách dùng Pipes trong chuyển đổi d�?liệu nhé!

Pipes là một tính năng của Angular và là một framework phát triển ứng dụng web bằng ngôn ng�?TypeScript. Pipes cho phép bạn x�?lý và biến đổi d�?liệu một cách d�?dàng trong các template của Angular. Hiểu đơn giản, pipe là một function nhận input mà chúng ta truyền vào và output ra giá tr�?mình mong muốn.

Các ứng dụng thông thường đều bao gồm các bước cơ bản:

Lấy d�?liệu t�?server bằng cách gọi API call lên server đ�?lấy d�?liệu theo thời gian thực.
Sau đó thực hiện chuyển đổi d�?liệu nhận được t�?API, ví d�?như bạn nhận được giá tr�?là 2023-12-15T09:00:00.000Z dưới định dạng ISO. Nhưng trên UI mình phải show �?format d�?đọc cho user Dec 15, 2023.
Và hiển th�?d�?liệu lên UI cho người dùng.

Sơ đ�?d�?liệu của một ứng dụng web thông thường

Pipes s�?làm nhiệm v�?th�?2, là chuyển đổi d�?liệu trước khi show cho người dùng. Ví d�?/span> giữa client và server khi trao đổi thông tin liên quan đến thời gian, thường dùng ISO format “2020-06-24T09:00:00.000Z”, tương đương với ngày 24 tháng 6, 5h chiều (gi�?Singapore).

Tuy nhiên khi hiển th�? chúng ta không th�?hiển tr�?trực tiếp ISO string cho người dùng vì không phải ai cũng là developer đ�?hiểu được đó là gì. Vậy nên chúng ta cần transform ISO string �?trên dưới dạng mà người dùng có th�?hiểu được, ví d�?Jun 24, 2020, 5:00:00 PM.

Đ�?làm được việc này bạn có nhiều lựa chọn, nhưng thường thì có hai lựa chọn trong Angular:

Viết một function, nhận date input và return output.
Viêt một pipe, cũng nhận input và return output.

Điểm lợi th�?của Pipe là d�?tái s�?dụng. Vì thông thường s�?có khá nhiều page cần hiển th�?date time, việc dùng Pipe s�?đem lại nhiều ưu điểm hơn là function.

Dùng pipe như th�?nào?

Angular có cung cấp sẵn một s�?pipes thường dùng trong package @angular/common chẳng hạn như UpperCase, LowerCasePipe, DecimalPipe, DatePie�? Như đã nói �?trên, pipe s�?nhận vào input và output ra một giá tr�?mình mong muốn.

Đ�?s�?dụng một pipe trong Angular, bạn cần gọi pipe bằng cách s�?dụng ký hiệu | trong template của bạn. Ví d�? đ�?hiển th�?một chuỗi dạng in hoa, bạn có th�?s�?dụng UpperCasePipe như sau:

<p>{{ ‘hello world’ | uppercase }}p>

Kết qu�?hiển th�?s�?là HELLO WORLD. Ngoài ra, bạn cũng có th�?chuyển đổi ngày tháng s�?dụng DatePipe. Ví d�?

<p>{{ today | date:‘yyyy-MM-dd’ }}p>

Trong đó today là một biến JavaScript chứa ngày hiện tại, kết qu�?s�?được hiển th�?dưới dạng 2023-07-31.

Chú ý: Phần giữa hai dấu ngoặc nhọn {{ }} bao gồm variable bạn muốn hiển th�?và dấu x�?dọc | là pipe operator, sau đó là tên của pipe bạn đã định nghĩa. Tất c�?pipe đều hoạt động theo cách này.

Cú pháp: {{ interpolated_value | pipe_name }}

Pipe và parameters

Trong Angular, pipes có th�?nhận tham s�?đ�?thực hiện các biến đổi d�?liệu tùy chỉnh. Đ�?truyền tham s�?cho pipe, bạn cần s�?dụng cú pháp: sau tên pipe và truyền giá tr�?tham s�?sau đó. Như ví d�?date �?trên, date là tên của pipe, và ‘yyyy-MM-dd’ là giá tr�?của tham s�?truyền vào. Tham s�?này định dạng ngày tháng đ�?hiển th�? Đó cũng là cú pháp đ�?pass parameter cho pipe.

Cú pháp: {{ interpolated_value | pipe_name:parameter1:parameter2:…:parameterN }}

Bạn có th�?truyền vào s�?lượng parameter không giới hạn.

Chaining pipe

Pipes cho phép chúng ta dùng nhiều pipe đ�?chuyển đổi một giá tr�? Chaining pipe s�?chạy lần lượt qua các pipe t�?trái qua phải. Sau khi có output pipe_name_1, thì output này s�?được x�?lý qua pipe_name_2 rồi tương t�?đến pipe_name_n đ�?ra output cuối cùng hiển th�?lên UI

Cú pháp: {{ interpolated_value | pipe_name_1 | pipe_name_2 |… | pipe_name_n }}

Kết qu�?hiển th�?s�?là JUN 24, 2020, 5:00:00 PM

Các pipe có sẵn đi kèm với Angular (built-in pipe)

Angular cung cấp sẵn khá nhiều pipes đ�?có th�?s�?dụng được khi import CommonModule t�?package @angular/common. Dưới đây là một s�?pipe thường s�?dụng:

Pipe	Mô t�?/b>
DatePipe	Formats a date.
UpperCasePipe	Convert text sang ch�?hoa.
LowerCasePipe	Convert text sang ch�?thường.
CurrencyPipe	Hiển th�?giá tr�?tiền t�?
DecimalPipe	Hiển th�?s�?thập phân
PercentPipe	Hiển th�?phần trăm %
JsonPipe	Hiển th�?json
AsyncPipe	Hiển th�?value của observable và t�?động unsubscribe khi view được destroy

Custom pipe

S�?lượng pipe có sẵn đó cũng không th�?nào đáp ứng được hết các nhu cầu trong các ứng dụng khác nên chúng ta cũng hoàn toàn có th�?viết các custom pipe theo nhu cầu thực t�? Đ�?viết một pipe dành riêng cho nhu cầu của từng d�?án, cần thực hiện theo hai bước sau.

Bước 1: Tạo class implement Interface PipeTransform.

Interface PipeTransform là interface có sẵn trong @angular/core ch�?bao gồm một method duy nhất tên là transform. Đây là interface PipeTransform cần implement.

interface PipeTransform {

transform(value: any, …args: any[]): any;

}

Tạo một class sau khi đã implement PipeTransform:

export class CustomPipe implements PipeTransform {

transform(resourceId: string): string {

return resourceId ? ‘Edit’ : ‘Add’;

}

Nội dung method transform �?đây rất đơn giản. Nếu resourceId là true thì tr�?v�?Edit, nếu không thì tr�?Add.

Bước 2: Thêm Pipe decorator cho class đã implement PipeTransform

Giống như component có decorator @Component. Pipe cũng có decorator @Pipe

@Pipe({

name: ‘appCustomPipe’,

})

export class CustomPipe implements PipeTransform {

transform(resourceId: string): string {

return resourceId ? ‘Edit’ : ‘Add’;

}

Khi thêm Pipe decorator thì có một thuộc tính bắt buộc, đó chính là name – tên của pipe. Chúng ta đặt là appCustomPipe. Lưu ý rằng bạn phải đặt CustomPipe trong mảng declarations �?module tương ứng mà bạn muốn s�?dụng. Nếu không Angular s�?báo lỗi. Chúng ta có th�?dùng pipe appCustomPipe như những pipe thông thường bình thường.

<h2 class=“ibox-title”>{{ userId | appCustomPipe }} Userh2>

Chú ý: Cách đặt tên cho pipe và class

Tên class theo quy tắc UpperCamelCase, tức là viết hoa các ch�?cái đầu của từng t�?/span>
Tên của pipe s�?theo quy tắc camelCase, tức là ch�?cái đầu của t�?đầu tiên viết thường. Các ch�?cái đầu của các t�?tiếp theo viết hoa.
Không được dùng dấu gạch ngang – cho tên

Custom pipe parameters

Vẫn là ví d�?trên, nhưng �?một vài trang có yêu cầu là khi m�?form “Thêm mới” s�?không hiện tiêu đ�?là “Thêm mới” nữa mà đổi lại thành “Tạo mới”. Còn form “Sửa” thì đổi lại thành “Cập nhật”. Chúng ta hoàn toàn có th�?truyền vào hai parameters tương ứng với hai tiêu đ�?này. Và nếu mặc định không truyền mình s�?đặt lại là “Thêm mới” và “Sửa” tương ứng. Code có th�?được viết lại như sau:

@Pipe({

name: ‘appCustomPipe’,

})

export class CustomPipe implements PipeTransform {

transform(

resourceId: string,

addText: string = “Thêm mới”,

editText: string = “Sửa”

): string {

return resourceId ? editText : addText;

}

Và code trên giao diện được thay đổi thành

Phương thức chuyển đổi d�?liệu có th�?nhận vào nhiều tham s�? Trong đó:

Tham s�?đầu tiên chính là giá tr�?của của biến khi mình dùng pipe. Ví d�?{{ userId | appCustomPipe }} thì transform(resourceId: string), resourceId chính là giá tr�?của userId được truyền vào.

Khi truyền các tham s�?khác bằng dấu hai chấm : thì biến tương ứng trong Phương thức transform s�?là t�?biến th�?2 tr�?đi. Ví d�?như {{ userId | appTitle:”Tạo mới”:”Cập nhật”}} thì “Tạo mới” s�?là giá tr�?của addText: string và “Cập nhật” s�?tương ứng với editText: string

Thông qua một vài ví d�?đơn giản phía trên mong là s�?giúp các bạn hiểu hơn v�?ý nghĩa và các cách s�?dụng pipe trong việc lập trình Angular. Chúc các bạn thành công!

B�?môn Công ngh�?thông tin
Trường Cao đẳng FPT M?ng c�� c??c b��ng ?�� cơ s�?Hà Nội

The post Pipes là gì? Cách chuyển đổi d�?liệu nhận được t�?API appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.