Cách làm việc với TypeScript Decorators trong Angular

Trình trang trí TypeScript là một loại khai báo đặc biệt có thể được đính kèm vào một lớp, phương thức, trình truy cập, thuộc tính hoặc tham số. Trong Angular, trình trang trí cung cấp một cách để thêm siêu dữ liệu vào các lớp, khiến chúng trở nên cực kỳ mạnh mẽ để tạo các thành phần, dịch vụ có thể tái sử dụng, v.v. Hướng dẫn này giải thích cách làm việc với trình trang trí TypeScript trong Angular, cung cấp các ví dụ để giúp hiểu rõ hơn về cách sử dụng chúng.

Trình trang trí TypeScript là gì?

Decorator là các hàm sửa đổi hành vi của một lớp hoặc thành viên lớp. Trong Angular, decorator được sử dụng để định nghĩa các thành phần, chỉ thị, đường ống và dịch vụ có thể tiêm. Chúng cung cấp một cách khai báo để áp dụng siêu dữ liệu vào một lớp, mà Angular sử dụng cho nhiều mục đích khác nhau, chẳng hạn như tạo các thể hiện của thành phần hoặc tiêm các phụ thuộc.

Các trình trang trí góc phổ biến

Angular có một số decorator tích hợp được sử dụng cho các mục đích khác nhau. Dưới đây là các decorator Angular phổ biến nhất:

• @Component - Định nghĩa một thành phần Angular.
• @Directive - Định nghĩa một chỉ thị Angular.
• @Pipe - Định nghĩa đường ống góc.
• @Injectable - Xác định một dịch vụ có thể được đưa vào các thành phần hoặc dịch vụ khác.
• @Input - Trang trí một thuộc tính để biến nó thành đầu vào liên kết dữ liệu.
• @Output - Trang trí một thuộc tính để biến nó thành đầu ra ràng buộc sự kiện.

Sử dụng @Component Decorator

Decorator @Component được sử dụng để định nghĩa một thành phần Angular. Nó cung cấp siêu dữ liệu về thành phần, chẳng hạn như selector, template, styles và các cấu hình khác.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

Trong ví dụ này, trình trang trí @Component định nghĩa một thành phần đơn giản với mẫu hiển thị "Hello, World!". selector chỉ định thẻ HTML tùy chỉnh để sử dụng cho thành phần này.

Sử dụng @Injectable Decorator

Decorator @Injectable được sử dụng để định nghĩa một lớp dịch vụ có thể được inject vào các thành phần hoặc dịch vụ khác. Đây là một phần thiết yếu của hệ thống dependency injection của Angular.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

Tại đây, trình trang trí @Injectable làm cho DataService có thể sử dụng để tiêm phụ thuộc trong toàn bộ ứng dụng.

Sử dụng @Input và @Output Decorator

Các trình trang trí @Input và @Output được sử dụng để tạo các thuộc tính đầu vào và sự kiện đầu ra trong các thành phần Angular. Chúng thường được sử dụng để giao tiếp thành phần.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

Trong ví dụ này, decorator @Input được sử dụng để truyền dữ liệu từ thành phần cha đến thành phần con. Decorator @Output được sử dụng để gửi dữ liệu từ thành phần con trở lại thành phần cha thông qua một sự kiện.

Tạo trình trang trí tùy chỉnh

Có thể tạo trình trang trí tùy chỉnh trong Angular để thêm hành vi hoặc siêu dữ liệu cụ thể vào các lớp, phương thức hoặc thuộc tính. Dưới đây là ví dụ về trình trang trí lớp đơn giản:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

Ở đây, hàm LogClass là một trình trang trí tùy chỉnh ghi nhật ký lớp vào bảng điều khiển khi nó được định nghĩa. Áp dụng @LogClass cho MyService sẽ ghi nhật ký các thông báo trong quá trình tạo lớp.

Phần kết luận

Decorator trong Angular cung cấp một cách mạnh mẽ để thêm siêu dữ liệu và hành vi vào các lớp, phương thức, thuộc tính và tham số. Hiểu cách sử dụng decorator tích hợp như @Component, @Injectable, @Input và @Output là điều cần thiết để phát triển Angular hiệu quả. Ngoài ra, decorator tùy chỉnh có thể được tạo để đáp ứng các nhu cầu cụ thể trong ứng dụng, tăng thêm tính linh hoạt cho quy trình phát triển.