Tìm Hiểu Về Angular Pipes: Biến Đổi Dữ Liệu Như Chuyên Gia

Khi xây dựng một ứng dụng Angular, chắc hẳn bạn đã phải đối mặt với một thách thức phổ biến: dữ liệu của bạn chưa sẵn sàng để hiển thị. Bạn lấy một ngày từ API và nó trông như thế này: 2023-10-27T18:30:00.000Z. Bạn có một số, 2500.50, cần phải được hiển thị dưới dạng tiền tệ. Hoặc bạn có một mảng người dùng cần được sắp xếp và lọc. Việc viết logic JavaScript thủ công trong các mẫu cho từng biến đổi này sẽ rất lộn xộn, kém hiệu quả và khó bảo trì.

Đây là lúc Angular Pipes trở nên hữu ích. Chúng là một trong những tính năng mạnh mẽ và thanh lịch nhất của framework Angular, được thiết kế đặc biệt để biến đổi dữ liệu ngay trong các mẫu HTML của bạn. Hãy nghĩ về chúng như những hàm đơn giản, có thể tái sử dụng mà bạn có thể sử dụng ngay lập tức để định dạng dữ liệu cho người dùng.

Trong hướng dẫn toàn diện này, chúng ta sẽ giải mã Angular Pipes. Chúng ta sẽ bắt đầu từ những khái niệm cơ bản nhất, khám phá các pipes tích hợp sẵn mà Angular cung cấp, tìm hiểu cách tạo các pipes tùy chỉnh của riêng bạn và thảo luận về các thực tiễn tốt nhất để giữ cho mã của bạn sạch sẽ và hiệu suất cao. Cuối cùng, bạn sẽ sử dụng pipes như một nghệ nhân thực thụ của Angular.

Angular Pipes Là Gì?

Đầu tiên, hãy xác định một cách đơn giản. Một Angular Pipe là một tính năng cho phép bạn biến đổi các giá trị hiển thị trong mẫu của bạn. Cú pháp cực kỳ đơn giản: bạn sử dụng toán tử pipe (|).

html Copy

{{ value | pipeName }}

Bạn có thể nghĩ về nó như một ống dẫn. Dữ liệu chảy vào từ bên trái, được biến đổi bởi pipe ở giữa, và đầu ra đã được định dạng cuối cùng chảy ra bên phải.

Điều đẹp đẽ của pipes là sự tinh khiết của chúng. Một pipe tinh khiết, theo mặc định, chỉ tái thực thi sự biến đổi của nó khi giá trị đầu vào dưới đây thay đổi một cách đáng kể. Điều này làm cho chúng có hiệu suất cao.

Tại Sao Nên Sử Dụng Pipes?

Lợi Ích Rõ Ràng

Phân Tách Mối Quan Hệ: Mã TypeScript của bạn nên xử lý logic kinh doanh và thu thập dữ liệu. Mẫu của bạn nên xử lý việc trình bày. Pipes giữ logic biến đổi dữ liệu ra khỏi thành phần của bạn, dẫn đến mã sạch hơn và dễ bảo trì hơn.
Tái Sử Dụng: Một khi bạn định nghĩa một pipe, bạn có thể sử dụng nó ở bất kỳ đâu trong ứng dụng của bạn. Cần định dạng một số điện thoại trong mười thành phần khác nhau? Chỉ cần một pipe thực hiện công việc.
Cú Pháp Khai Báo: Sử dụng một pipe trong mẫu của bạn là một cách tiếp cận khai báo. Bạn chỉ cần nêu rõ sự biến đổi bạn muốn (ví dụ: | date), không phải cách thực hiện. Điều này làm cho các mẫu dễ đọc và dễ hiểu hơn.
Hiệu Suất: Như đã đề cập, các pipes tinh khiết được tối ưu hóa bởi cơ chế phát hiện thay đổi của Angular, ngăn chặn các phép toán không cần thiết trên mỗi chu kỳ.

Sử Dụng Pipes: Bộ Công Cụ Tích Hợp Sẵn Của Angular

Angular đi kèm với một bộ pipes tích hợp sẵn phong phú cho các tác vụ thông thường. Hãy khám phá những cái hữu ích nhất với các ví dụ thực tế.

1. DatePipe: Kiểm Soát Ngày Tháng

Đây có lẽ là pipe được sử dụng nhiều nhất. Nó chuyển đổi một đối tượng ngày, số, hoặc chuỗi ISO thành định dạng dễ đọc cho con người dựa trên các tùy chọn định dạng đã định nghĩa hoặc tùy chỉnh.

Cú pháp:

html Copy

{{ value | date [ : format [ : timezone [ : locale ] ] ] }}

Các ví dụ:

html Copy

<!-- Giả sử ngày hôm nay là 27 tháng 10 năm 2023 -->
<p>Ngày Thô: {{ myDate }}</p> <!-- Đầu ra: Fri Oct 27 2023 00:00:00 GMT+0530 -->
<p>Định Dạng Mặc Định: {{ myDate | date }}</p> <!-- Đầu ra: Oct 27, 2023 -->
<p>Ngắn: {{ myDate | date:'short' }}</p> <!-- Đầu ra: 10/27/23, 12:00 AM -->
<p>Trung Bình: {{ myDate | date:'medium' }}</p> <!-- Đầu ra: Oct 27, 2023, 12:00:00 AM -->
<p>Tùy Chỉnh: {{ myDate | date:'fullDate' }}</p> <!-- Đầu ra: Friday, October 27, 2023 -->
<p>Rất Tùy Chỉnh: {{ myDate | date:'yyyy-MM-dd HH:mm' }}</p> <!-- Đầu ra: 2023-10-27 00:00 -->

2. UpperCasePipe và LowerCasePipe

Đây là các pipe đơn giản nhưng vô cùng hữu ích để đảm bảo định dạng chữ viết nhất quán.

Ví dụ:

html Copy

<p>{{ 'Hello Angular' | uppercase }}</p> <!-- Đầu ra: HELLO ANGULAR -->
<p>{{ 'Hello Angular' | lowercase }}</p> <!-- Đầu ra: hello angular -->

3. CurrencyPipe: Định Dạng Tiền Tệ

Chuyển đổi một số thành chuỗi tiền tệ, tự động xử lý ký hiệu tiền tệ, dấu thập phân và định dạng dựa trên locale đã cung cấp.

Cú pháp:

html Copy

{{ value | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

Ví dụ:

html Copy

<p>Mặc Định (USD): {{ 2500.50 | currency }}</p> <!-- Đầu ra: $2,500.50 -->
<p>Euro: {{ 2500.50 | currency:'EUR' }}</p> <!-- Đầu ra: €2,500.50 -->
<p>Mã: {{ 2500.50 | currency:'EUR':'code' }}</p> <!-- Đầu ra: EUR2,500.50 -->
<p>Số Chữ: {{ 2500.50 | currency:'USD':'symbol':'1.2-2' }}</p> <!-- Đầu ra: $2,500.50 -->

4. DecimalPipe và PercentPipe

Dành cho việc định dạng các số và tỷ lệ phần trăm với kiểm soát về số lượng chữ số thập phân.

Ví dụ:

html Copy

<p>Số: {{ 3.14159265 | number:'1.2-2' }}</p> <!-- Đầu ra: 3.14 -->
<p>Tỷ Lệ: {{ 0.75 | percent }}</p> <!-- Đầu ra: 75% -->

5. JsonPipe: Người Bạn Tốt Nhất Trong Việc Gỡ Lỗi

Pipe này là một cứu cánh trong quá trình phát triển. Nó chuyển đổi bất kỳ đối tượng nào thành chuỗi JSON. Lưu ý: Nó chỉ dành cho việc gỡ lỗi, không phải cho hiển thị cuối cùng.

Ví dụ:

html Copy

<pre>{{ myComplexObject | json }}</pre>
<!-- Xuất ra một đối tượng JSON được định dạng đẹp mắt trên màn hình -->

6. KeyValuePipe: Lặp Qua Các Đối Tượng

Cần lặp qua các thuộc tính của một đối tượng với *ngFor? Pipe này chuyển đổi một đối tượng thành một mảng key-value.

Ví dụ:

html Copy

<div *ngFor="let item of myObject | keyvalue">
  Khóa: {{ item.key }}, Giá Trị: {{ item.value }}
</div>

Nâng Cao: Tạo Các Pipes Tùy Chỉnh Của Bạn

Mặc dù các pipes tích hợp sẵn rất mạnh mẽ, nhưng các ứng dụng thực tế có những yêu cầu độc đáo. Đây là lúc các pipes tùy chỉnh phát huy tác dụng. Hãy cùng xây dựng một pipe thực tiễn: ReverseStringPipe.

Bước 1: Tạo Pipe

Sử dụng Angular CLI. Đây là cách tốt nhất để đảm bảo mọi thứ được thiết lập đúng cách.

bash Copy

ng generate pipe reverse-string

Bước 2: Triển Khai Logic

Mở tệp reverse-string.pipe.ts. CLI sẽ cung cấp cho bạn một khung.

typescript Copy

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverseString'
})
export class ReverseStringPipe implements PipeTransform {

  transform(value: string): string {
    // 1. Kiểm tra xem đầu vào có hợp lệ không
    if (!value) {
      return '';
    }

    // 2. Đảo ngược chuỗi bằng JavaScript đơn giản
    return value.split('').reverse().join('');
  }
}

Bước 3: Sử Dụng Trong Mẫu

Giống như một pipe tích hợp sẵn!

html Copy

<p>{{ 'Hello World' | reverseString }}</p> <!-- Đầu ra: dlroW olleH -->
<p>{{ myDynamicString | reverseString }}</p>

Trường Hợp Sử Dụng Thực Tế

Hãy tưởng tượng bạn đang xây dựng một trang web đa ngôn ngữ hỗ trợ một ngôn ngữ viết từ phải sang trái (RTL). Một pipe tùy chỉnh có thể là một phần của chiến lược lớn hơn để xử lý các biến đổi văn bản RTL.

Một ví dụ tuyệt vời khác: Một Pipe Lọc. Trong khi Angular không có một FilterPipe tích hợp sẵn vì lý do hiệu suất (nó có thể không hiệu quả với các mảng lớn), bạn có thể tạo một cái cho các trường hợp sử dụng cụ thể, như lọc một danh sách ngắn các thẻ hoặc danh mục.

Các Thực Tiễn Tốt Nhất và Mẹo Chuyên Nghiệp

Ưu Tiên Sử Dụng Pipes Tinh Khiết: Luôn cố gắng làm cho các pipes tùy chỉnh của bạn tinh khiết. Đây là mặc định vì lý do—nó mang lại một sự gia tăng hiệu suất lớn. Một pipe tinh khiết chỉ chạy lại khi danh tính nguyên thủy của giá trị đầu vào (như chuỗi hoặc số) hoặc tham chiếu đối tượng thay đổi.
Tránh Pipes Không Tinh Khiết Cho Các Tập Dữ Liệu Lớn: Các pipes không tinh khiết (được khai báo với pure: false trong trình trang trí) chạy trên mỗi chu kỳ phát hiện thay đổi. Điều này có thể gây thảm họa cho hiệu suất nếu sự biến đổi phức tạp hoặc tập dữ liệu lớn.
Sử Dụng Async Pipe Cho Observables/Promises: Đây có lẽ là một trong những pipes quan trọng nhất. AsyncPipe đăng ký một Observable hoặc Promise và trả về giá trị mới nhất mà nó đã phát ra. Nó cũng tự động hủy đăng ký khi thành phần bị hủy, ngăn ngừa rò rỉ bộ nhớ.

html Copy

<p>{{ data$ | async }}</p>

Chuỗi Pipes Để Biến Đổi Phức Tạp: Bạn có thể áp dụng nhiều pipes trong một chuỗi. Chúng thực thi từ trái sang phải.

html Copy

<p>{{ myDate | date:'fullDate' | uppercase }}</p>

Câu Hỏi Thường Gặp (FAQs)

Q: Tôi có thể truyền nhiều tham số vào một pipe không?
A: Chắc chắn rồi! Bạn sử dụng dấu hai chấm (:) để phân tách các tham số.

html Copy

{{ value | myPi:arg1:arg2:arg3 }}

Trong phương thức transform của pipe của bạn, bạn nhận chúng như các tham số bổ sung: transform(value: any, arg1: any, arg2: any, arg3: any).

Q: Sự khác biệt giữa một pipe và một phương thức trong thành phần là gì?
A: Một phương thức trong lớp thành phần là không tinh khiết từ quan điểm của Angular. Nó sẽ được gọi trên mỗi chu kỳ phát hiện thay đổi, điều này có thể không hiệu quả. Một pipe tinh khiết được tối ưu hóa và chỉ chạy khi đầu vào của nó thay đổi. Đối với việc biến đổi dữ liệu, pipes gần như luôn là sự lựa chọn tốt hơn.

Q: Làm thế nào để tôi làm cho một pipe không tinh khiết?
A: Bạn đặt thuộc tính pure thành false trong trình trang trí. Chỉ làm điều này nếu bạn cần pipe đó đánh giá lại trên mỗi chu kỳ phát hiện thay đổi (ví dụ: nếu nó phụ thuộc vào trạng thái toàn cầu thay đổi thường xuyên).

typescript Copy

@Pipe({
  name: 'myPipe',
  pure: false
})

Q: Pipes chỉ được sử dụng trong mẫu không?
A: Chủ yếu là có. Tuy nhiên, bạn cũng có thể sử dụng chúng trong mã TypeScript của thành phần của bạn bằng cách tiêm chúng qua constructor, giống như một dịch vụ.

typescript Copy

constructor(private datePipe: DatePipe) {}
ngOnInit() {
  this.formattedDate = this.datePipe.transform(this.myDate, 'short');
}

Kết Luận: Làm Chủ Pipes, Viết Code Angular Tốt Hơn

Angular Pipes là một khái niệm có vẻ đơn giản nhưng lại có tác động sâu sắc đến chất lượng mã của bạn. Chúng thúc đẩy sự sạch sẽ, tái sử dụng và hiệu suất. Bằng cách làm chủ các pipes tích hợp sẵn và học cách tạo ra các pipes tùy chỉnh của riêng bạn, bạn chuyển từ việc chỉ viết mã hoạt động thành viết ra các ứng dụng Angular thanh lịch, chuyên nghiệp và dễ bảo trì.

Hành trình trở thành một nhà phát triển Angular thành thạo đầy rẫy những khái niệm cốt lõi như thế này. Nếu bạn thấy hướng dẫn này hữu ích và nghiêm túc về việc xây dựng sự nghiệp trong phát triển web, hãy xem xét một lộ trình học tập có cấu trúc.

Chúng tôi tại CoderCrafter đam mê việc tạo ra thế hệ nhà phát triển tiếp theo. Các khóa học của chúng tôi, như Phát Triển Full Stack và MERN Stack, được thiết kế để cung cấp cho bạn hiểu biết sâu sắc và cơ bản trong khi làm việc trên các dự án thực tế. Để tìm hiểu thêm và nâng cao kỹ năng của bạn, hãy truy cập và đăng ký ngay hôm nay tại codercrafter.in.

Tìm Hiểu Về Angular Pipes: Biến Đổi Dữ Liệu Như Chuyên Gia