如何在 Angular 中使用 TypeScript 装饰器

TypeScript 装饰器是一种特殊的声明，可以附加到类、方法、访问器、属性或参数。在 Angular 中，装饰器提供了一种向类添加元数据的方法，使其在创建可重用的组件、服务等方面非常强大。本指南介绍了如何在 Angular 中使用 TypeScript 装饰器，并提供示例以帮助更好地理解它们的用法。

什么是 TypeScript 装饰器？

装饰器是修改类或类成员行为的函数。在 Angular 中，装饰器用于定义组件、指令、管道和可注入服务。它们提供了一种将元数据应用于类的声明式方法，Angular 会将其用于各种目的，例如创建组件实例或注入依赖项。

常见的 Angular 装饰器

Angular 有多个用于不同目的的内置装饰器。以下是最常见的 Angular 装饰器：

@Component - 定义一个 Angular 组件。
@Directive - 定义一个 Angular 指令。
@Pipe - 定义一个 Angular 管道。
@Injectable - 定义可以注入到其他组件或服务的服务。
@Input - 装饰一个属性，使其成为数据绑定输入。
@Output - 装饰一个属性，使其成为事件绑定输出。

使用@Component 装饰器

@Component 装饰器用于定义 Angular 组件。它提供有关组件的元数据，例如其选择器、模板、样式和其他配置。

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

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

在此示例中，@Component 装饰器定义了一个简单组件，其模板显示“Hello, World!”。selector 指定要用于此组件的自定义 HTML 标记。

使用 @Injectable 装饰器

@Injectable 装饰器用于定义可以注入到其他组件或服务中的服务类。它是 Angular 依赖注入系统的重要组成部分。

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

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

这里，@Injectable 装饰器使得 DataService 可用于整个应用程序的依赖注入。

使用 @Input 和 @Output 装饰器

@Input 和 @Output 装饰器用于在 Angular 组件中创建输入属性和输出事件。它们通常用于组件通信。

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!');
  }
}

在此示例中，@Input 装饰器用于将数据从父组件传递到子组件。@Output 装饰器用于通过事件将数据从子组件发送回父组件。

创建自定义装饰器

可以在 Angular 中创建自定义装饰器，以向类、方法或属性添加特定行为或元数据。下面是一个简单的类装饰器的示例：

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

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

此处，LogClass 函数是一个自定义装饰器，在定义类时会将其记录到控制台。将 @LogClass 应用于 MyService 会在创建期间记录消息。

结论

Angular 中的装饰器提供了一种向类、方法、属性和参数添加元数据和行为的强大方法。了解如何使用内置装饰器（如 @Component、@Injectable、@Input 和 @Output）对于高效进行 Angular 开发至关重要。此外，还可以创建自定义装饰器以满足应用程序中的特定需求，从而增加开发过程的灵活性。

typescript 装饰器 angular 组件输入输出可注入服务自定义元数据示例 typescriptdecorators 类函数