Cách xây dựng chỉ thị tùy chỉnh trong Angular

Một trong những tính năng chính của Angular là chỉ thị. Các chỉ thị góc là một cách để bạn thêm hành vi vào các phần tử DOM. Angular cung cấp nhiều chỉ thị tích hợp khác nhau và bạn cũng có thể tạo các chỉ thị tùy chỉnh trong khung mạnh mẽ này.

Chỉ thị là gì?

Các chỉ thị trong Angular là các cấu trúc mã chuyên dụng được thiết kế để tác động đến cách trình bày và tính tương tác của các phần tử HTML thông qua nhiều phương tiện khác nhau như sửa đổi Mô hình đối tượng tài liệu (DOM), thêm trình xử lý sự kiện hoặc kiểm soát mức độ hiển thị. Các lệnh này cho phép các nhà phát triển thao tác hiệu quả với giao diện người dùng bằng cách chỉ định các thay đổi mong muốn trong chính cú pháp mẫu.

Các chỉ thị cấu trúc trong Angular sửa đổi bố cục của Mô hình đối tượng tài liệu (DOM), trong khi các chỉ thị thuộc tính ảnh hưởng đến khía cạnh trực quan hoặc chức năng của các thành phần riêng lẻ trong mẫu. Các chỉ thị này cung cấp một phương tiện mạnh mẽ để nâng cao khả năng của các ứng dụng Angular bằng cách cho phép các nhà phát triển tùy chỉnh và thao tác đánh dấu HTML một cách dễ dàng.

Lợi ích của Chỉ thị

Việc sử dụng các chỉ thị trong Angular mang lại nhiều lợi ích khác nhau, bao gồm nâng cao tính linh hoạt và kiểm soát hành vi của thành phần, cũng như cải thiện tính mô đun và tổ chức mã. Bằng cách tận dụng các lệnh, nhà phát triển có thể tạo hành vi tùy chỉnh cho các thành phần vượt ra ngoài các thuộc tính HTML cơ bản hoặc móc nối vòng đời, cho phép mang lại khả năng biểu đạt cao hơn và kiểm soát chi tiết hơn đối với các tương tác giao diện người dùng. Ngoài ra, các chỉ thị cho phép đóng gói và phân tách các mối quan tâm trong ứng dụng tốt hơn, thúc đẩy khả năng sử dụng lại và bảo trì trên các phần khác nhau của dự án. Nhìn chung, các lệnh đóng vai trò thiết yếu trong việc định hình cấu trúc và chức năng của các ứng dụng Angular, cung cấp cho nhà phát triển các công cụ mạnh mẽ để xây dựng giao diện người dùng phức tạp và trải nghiệm người dùng một cách hiệu quả.

Khả năng sử dụng lại là tính năng chính của các lệnh cho phép sử dụng chúng trên nhiều thành phần, giúp tăng hiệu quả bằng cách giảm sự dư thừa và thúc đẩy tính nhất quán trong suốt dự án của bạn.

Khả năng mở rộng chỉ thị cho phép bổ sung các chức năng mới trong các thành phần, từ đó nâng cao khả năng của chúng và cải thiện hiệu suất tổng thể.

Tính linh hoạt được cung cấp bởi các lệnh cho phép thao tác và tùy chỉnh các thuộc tính và hành động của các phần tử, cung cấp cho các nhà phát triển nhiều quyền tự do sáng tạo để xây dựng ứng dụng của họ một cách hiệu quả.

Thiết lập ứng dụng góc của bạn

Để thiết lập dự án Angular, hãy thực hiện lệnh sau trong thiết bị đầu cuối của bạn để cài đặt Giao diện dòng lệnh góc (CLI):

 npm install -g @angular/cli

Sau khi cài đặt Giao diện dòng lệnh góc (CLI), người ta có thể thiết lập dự án Angular bằng lệnh tiếp theo:

 ng new custom-directives-app

Việc thực hiện hướng dẫn nói trên sẽ tạo ra một ứng dụng Angular được gọi là “ứng dụng chỉ thị tùy chỉnh”.

Tạo Chỉ thị Tùy chỉnh

Để tạo các chỉ thị tùy chỉnh trong dự án Angular, trước tiên người ta phải thiết lập tệp TypeScript và chỉ định một lớp được trang trí bằng trình trang trí Chỉ thị.

Trình trang trí @Directive là một tính năng của TypeScript cho phép tạo các lệnh tùy chỉnh. Để triển khai chức năng này, chúng ta sẽ thiết lập một tệp highlight.directive.ts trong thư mục src/app. Trong tệp này, chúng ta sẽ xây dựng lệnh tùy chỉnh được gọi là highlight.

Ví dụ:

 import { Directive } from "@angular/core";

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

Lệnh đã nhập có nguồn gốc từ mô-đun lõi Angular và được trang trí bằng cách sử dụng trình trang trí @Directive, chấp nhận một đối số bao gồm một biểu diễn hướng đối tượng với thuộc tính selector.

Trong trường hợp này, việc đặt thuộc tính bộ chọn thành “[myHighlight]” cho phép một người áp dụng lệnh này cho các mẫu của họ bằng cách gắn thuộc tính “myHighlight” vào một phần tử được chỉ định.

Việc kết hợp chỉ thị trong cấu trúc mẫu có thể đạt được như sau:

 <main>
 <p myHighlight>Some text</p>
</main>

Thêm hành vi vào Chỉ thị

Để thao tác Mô hình đối tượng tài liệu (DOM) bằng cách sử dụng một lệnh, trước tiên người ta phải tạo lệnh đã nói và lấy một phiên bản của ElementRef từ gói @angular/core. Tham chiếu này phục vụ như một phương tiện để gắn các hành vi vào các thành phần trong mẫu.

Để sử dụng ElementRef trong một lệnh, nó phải được tích hợp vào hàm khởi tạo của lệnh đó. ElementRef phục vụ như một sự đóng gói cho một phần tử gốc nằm trong một khung nhìn cụ thể.

Chắc chắn đây là hình minh họa thể hiện quá trình gắn một hành vi vào một lệnh trong Angular:

 import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}

Hàm tạo của lớp HighlightDirective chấp nhận tham số ElementRef, được cung cấp tự động bởi Angular. ElementRef này cấp quyền truy cập vào phần tử DOM tương ứng.

Bằng cách sử dụng thuộc tính this.element.nativeElement, người ta có thể có quyền truy cập vào phần tử DOM gốc được biểu thị bằng tham số element. Sau đó, bằng cách sử dụng thuộc tính style , có thể chỉ định màu xanh lam nhạt làm màu nền cho thành phần được đề cập. Do đó, bất kỳ phần tử nào được áp dụng lệnh myHighlight sẽ có nền màu xanh da trời.

Để thực hiện lệnh này, bạn bắt buộc phải nhập và khai báo rõ ràng sự hiện diện của nó trong tệp app.module.ts.

Ví dụ:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

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

Bây giờ bạn có thể sử dụng lệnh myHighlight trên các thành phần cấu thành trong các thành phần Angular của mình.

 <main>
 <p myHighlight>Some text</p>
</main>

Để đánh giá chức năng của một lệnh cụ thể trong một ứng dụng, bạn nên triển khai và thực thi ứng dụng trên máy chủ phát triển được chỉ định bằng giao diện dòng lệnh. Để bắt đầu quá trình này, hãy điều hướng đến thư mục thích hợp chứa thiết bị đầu cuối và nhập lệnh được chỉ định để thực thi. Điều này sẽ cho phép bạn xác minh xem lệnh này có hoạt động như dự định hay không.

 ng serve

Sau khi thực hiện hướng dẫn đã cho, vui lòng hướng trình duyệt internet của bạn tới “ http://localhost:4200/ ” để truy cập vào giao diện người dùng có nét tương đồng nổi bật với giao diện được mô tả biểu diễn trực quan bên dưới.

Các lệnh gốc của Angular cho phép sửa đổi giao diện của một phần tử bằng cách chấp nhận các giá trị cụ thể, tuy nhiên, chức năng này không được mở rộng cho các lệnh tùy chỉnh, chẳng hạn như “myHighlight”. Để khắc phục hạn chế này, người ta có thể triển khai tùy chọn cấu hình trong lệnh tùy chỉnh cho phép sửa đổi động màu nền của mẫu dựa trên giá trị được cung cấp.

Để sửa đổi hành vi của lệnh highlight trong Angular, người ta có thể thay thế nội dung của tệp highlight.directive.ts bằng mẫu được cung cấp. Điều này sẽ dẫn đến việc hiển thị các phần tử HTML khác nhau được khớp với bộ chọn của lệnh.

 import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})

export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) {
     }
}

Mã được cung cấp thể hiện cách triển khai lớp HighlightDirective trong Angular, lớp này sở hữu phương thức setter được xác định là’myHighlight’. Phương thức đã nói chấp nhận một tham số đầu vào duy nhất của chuỗi loại dữ liệu và được trang trí bằng trình trang trí Đầu vào, cho phép nó nhận giá trị màu đã nói từ thành phần giám sát.

Bây giờ người ta có thể chỉ định màu nền mong muốn cho phần tử bằng thuộc tính myHighlight bằng cách cung cấp giá trị cho nó.

Ví dụ:

 <main>
 <p myHighlight='pink'>Some text</p>
</main>

Tạo Chỉ thị Cấu trúc Tùy chỉnh

Trong các đoạn trước, bạn đã được hướng dẫn về quy trình xây dựng, triển khai các hành động và triển khai các chỉ thị thuộc tính được cá nhân hóa trong một mẫu. Các chỉ thị thuộc tính thay đổi cách trình bày trực quan của các thành phần DOM, trong khi các chỉ thị cấu trúc sửa đổi thành phần của các thành phần trong DOM bằng cách thêm, xóa hoặc định vị lại chúng.

Angular cung cấp hai chỉ thị cấu trúc cơ bản, đó là ngFor và ngIf. Cái trước lặp qua một mảng các mục và hiển thị một mẫu tương ứng cho từng phần tử, trong khi cái sau chịu trách nhiệm hiển thị các phần tử có điều kiện dựa trên các tiêu chí cụ thể.

Trong phân đoạn này, chúng ta sẽ phát triển một lệnh cấu trúc được thiết kế riêng có chức năng tương tự như lệnh ngIf. Để thực hiện điều này, chúng ta sẽ thiết lập một tệp condition.directive.ts.

Trong tệp điều kiện.directive.ts, hãy viết mã này:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

@Directive({
    selector: "[condition]"
})

export class ConditionDirective {

    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(
 private template: TemplateRef<unknown>,

private viewContainer: ViewContainerRef

) {}
}

Đoạn mã hiện tại cho phép triển khai có điều kiện các thành phần thông qua việc áp dụng “điều kiện” hướng tới một phần tử, kèm theo việc truyền giá trị Boolean từ thành phần bao quanh.

một Tham chiếu mẫu và một ViewContainerRef. Cái trước đóng vai trò là một tham chiếu đến mẫu được liên kết với lệnh, trong khi cái sau thể hiện bối cảnh hiển thị khung nhìn trong đó các khung nhìn của lệnh sẽ được hiển thị.

ConditionDirective sử dụng một biểu thức điều kiện, được triển khai thông qua câu lệnh if-else, để đánh giá giá trị của đối số mà nó nhận được. Nếu đầu vào nói trên được chứng minh là hợp lệ, thì cấu trúc sẽ tạo ra một phối cảnh kèm theo bằng cách sử dụng mẫu thiết kế đã chỉ định với sự hỗ trợ của phương pháp createEmbeddedView() vốn có trong ViewContainerRef. Sau đó, hàm renderView() được liên kết với phiên bản vùng chứa này sẽ điều phối việc kết hợp quan điểm mới được tạo trong Mô hình Đối tượng Tài liệu (DOM) của trình duyệt.

Nếu điều kiện đã chỉ định không được đáp ứng, lệnh sẽ sử dụng phương thức clear() của ViewContainerRef để xóa tất cả các kết xuất trước đó trong vùng chứa chế độ xem khỏi tài liệu.

Việc kết hợp lệnh này đòi hỏi phải nhập và thừa nhận sự hiện diện của nó trong tệp mô-đun của ứng dụng. Sau khi hoàn thành, nó sẽ có thể truy cập được để sử dụng trong các cấu trúc mẫu.

Có thể thực hiện việc kết hợp tiện ích mở rộng trong một mẫu bằng cách kết hợp đoạn mã được cung cấp, như minh họa bên dưới:

 <main>
 <p *condition="true">Hello There!!!</p>
</main>

Bây giờ bạn có thể tạo chỉ thị tùy chỉnh

Các chỉ thị tùy chỉnh của Angular cung cấp một phương tiện trao quyền để tác động đến Mô hình đối tượng tài liệu (DOM) và đưa chức năng động vào các cấu trúc mẫu. Sau khi đã làm quen với việc tạo và áp dụng các thuộc tính tùy chỉnh và chỉ thị cấu trúc, giờ đây bạn đã được trang bị để khai thác triệt để tiềm năng của Angular.