Cách tạo các ống tùy chỉnh trong góc

Ống là một tính năng Angular mạnh mẽ cho phép bạn chuyển đổi và định dạng dữ liệu trong ứng dụng của mình. Chúng cung cấp một cách thuận tiện để thao tác dữ liệu trước khi hiển thị cho người dùng, làm cho ứng dụng của bạn trở nên năng động và thân thiện hơn với người dùng.

Angular cung cấp một loạt các pipe được xác định trước được gọi là “các pipe tích hợp”, bao gồm các loại như DatePipe, MoneyPipe và UpperCasePipe. Ngoài ra, các nhà phát triển có thể linh hoạt thiết kế các đường dẫn phù hợp của riêng mình để cho phép họ thao tác thông tin theo các yêu cầu cụ thể.

Thiết lập dự án góc của bạn

Để thiết lập hiệu quả các đường ống được cá nhân hóa trong khuôn khổ Angular, bắt buộc phải có sự hiểu biết toàn diện về cơ chế đường ống. Trước khi tiếp tục, hãy đảm bảo rằng bạn đã quen với việc triển khai đường ống trong Angular. Điều kiện tiên quyết để thiết lập dự án Angular liên quan đến việc cài đặt Giao diện dòng lệnh góc (CLI) trên hệ thống của bạn. Điều này có thể đạt được bằng cách sử dụng Trình quản lý gói Node (npm).

Để cài đặt Giao diện dòng lệnh góc (CLI), hãy thực hiện hướng dẫn sau:

 npm install -g @angular/cli

Để bắt đầu dự án Angular bằng cách sử dụng một phiên bản khung cụ thể và thiết lập môi trường để phát triển, hãy thực hiện các bước sau trong terminal hoặc dấu nhắc lệnh của bạn:

 ng new my-app

Khi bạn đã thiết lập dự án, hãy chuyển đến thư mục chứa dự án trong môi trường phát triển tích hợp (IDE) của bạn và khởi chạy ứng dụng trong đó.

Tạo một ống tùy chỉnh

Để phát triển ứng dụng Angular, cần thiết lập nền tảng bằng cách thiết lập dự án và định cấu hình mọi phụ thuộc cần thiết. Khi quá trình này đã hoàn tất, bước tiếp theo bao gồm việc tạo bộ lọc tùy chỉnh thông qua việc sử dụng Giao diện dòng lệnh góc (CLI). Điều này cho phép tạo ra một thành phần duy nhất có thể được tích hợp trong các mẫu của ứng dụng để thực hiện các tác vụ cụ thể hoặc thao tác dữ liệu theo một cách cụ thể.

Thực hiện hướng dẫn sau trong thư mục dự án tương ứng bằng giao diện đầu cuối:

 ng generate pipe customPipe

Việc thực thi lệnh này sẽ dẫn đến việc tạo hai tệp, đó là “custom-pipe.pipe.ts” và “custom-pipe.pipe.spec.ts”, trong thư mục “src/app”. Tệp trước là tệp TypeScript chứa việc triển khai ống tùy chỉnh của bạn, trong khi tệp sau đóng vai trò là nơi thử nghiệm để xác minh chức năng của ống tùy chỉnh nói trên thông qua các tình huống thử nghiệm khác nhau.

Trong tập lệnh custom-pipe.pipe.ts, người ta gặp một loạt hướng dẫn lập trình như sau:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Câu lệnh nhập mã hiện tại lấy bộ trang trí Pipe và giao diện PipeTransform từ mô-đun @angular/core. Trình trang trí Pipe nói trên chịu trách nhiệm phân định siêu dữ liệu liên quan đến pipe, trong khi lớp của pipe tuân theo giao diện PipeTransform nói trên.

Khi triển khai lớp CustomPipePipe, chúng tôi tuân thủ các yêu cầu của giao diện PipeTransform bằng cách cung cấp khả năng thực thi phương thức biến đổi. Phương pháp này có nhiệm vụ thiết yếu là thực hiện chuyển đổi trên dữ liệu đầu vào.

Phương thức “chuyển đổi” chứa tổng cộng hai biến đầu vào, đó là tham số “giá trị” biểu thị giá trị chuyển đổi đường ống và tham số “args” đóng vai trò phân bổ cho bất kỳ thông số kỹ thuật bổ sung nào mà người ta có thể muốn kết hợp.

Sau khi hiểu cấu trúc cơ bản của tệp custom-pipe.pipe.ts, người ta có thể thay thế đoạn mã được cung cấp cho nó một cách hiệu quả như sau:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  transform(value: string): string[] {
    return value.split('');
  }
}

Trong đoạn mã này, hàm transform chấp nhận một tham số value thuộc loại string , được truyền dưới dạng đối số cho phương thức. Sau đó, hàm này sử dụng phương thức split để chia chuỗi đầu vào thành một mảng gồm các ký tự riêng lẻ, cuối cùng trả về mảng đã nói.

Tích hợp ống tùy chỉnh vào ứng dụng của bạn

Chúc mừng! Bạn đã tạo thành công một pipe được cá nhân hóa có thể được tích hợp liền mạch trong các mẫu Angular của mình. Trước khi sử dụng pipe riêng biệt trong dự án của bạn, trước tiên bạn phải kết hợp và đăng ký nó trong tệp app.module.ts của mình. Để đạt được điều này, chỉ cần thay thế nội dung hiện tại của tệp app.module.ts bằng đoạn mã tiếp theo:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPipePipe } from './custom-pipe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thật vậy, giờ đây người ta có thể kết hợp đường dẫn trong tệp app.comComponent.html của mẫu bằng cách đưa vào đánh dấu nói trên, điều này tạo điều kiện thuận lợi cho việc triển khai chức năng mong muốn trong khi vẫn tuân thủ các tiêu chuẩn phát triển web đã thiết lập và các phương pháp hay nhất.

 <p>{{ 'apple' | CustomPipe }}</p>

Trong hình minh họa này, CustomPipe được sử dụng như một phương tiện để chuyển đổi các ký tự riêng lẻ bao gồm chuỗi’quả táo’thành một biểu diễn mảng.

Kiểm tra ống tùy chỉnh của bạn

Để quan sát chức năng của đường dẫn phù hợp, bạn nên khởi chạy máy chủ phát triển Angular bằng cách thực thi lệnh đầu cuối nói trên.

 ng serve

Mở trình duyệt của bạn và điều hướng đến http://localhost:4200. Bạn sẽ thấy chuỗi chuyển đổi được hiển thị trên trang:

Đưa ứng dụng góc cạnh của bạn lên một tầm cao mới

Đường ống đóng vai trò là tài nguyên ưu việt trong khung Angular, cho phép thao tác và tái cấu trúc thông tin trong toàn bộ ứng dụng của bạn. Bằng cách phát triển các quy trình được thiết kế riêng, người ta có thể nâng cao tính linh hoạt của phần mềm và mang lại cho nó một thước đo bổ sung về tính năng động.

Để nâng cao trình độ của bạn với Angular, điều cần thiết là phải hiểu cơ chế định tuyến của nó. Quản lý tuyến đường đóng một vai trò không thể thiếu trong việc định hướng điều hướng của người dùng trong suốt ứng dụng, từ đó nâng cao cả khả năng sử dụng và hiệu quả của các ứng dụng một trang.