在 Angular 中使用装饰器定义元数据
介绍
Angular 应用是以下 Angular 工件的交互：
- 成分
- 服务
- 指令
- 管道
- 模块
每个工件都是一个 TypeScript 类。Angular 借助装饰器将 TypeScript 类识别为 Angular 工件。在本指南中，您将了解不同的装饰器及其相应的属性，以了解 Angular 如何将简单的 TypeScript 类识别为 Angular 组件、指令、管道、服务或模块。
Angular 装饰器的作用
Angular 装饰器的全部用途是存储有关类、方法或属性的元数据。配置组件时，您将为该类提供元数据，以告知 Angular 您有一个组件，并且该组件具有特定配置。每个装饰器都有一个基本配置和一些默认值。使用相关工厂创建装饰器时，将传递默认配置。
Angular 中有四种类型的装饰器：
- 类装饰器
- 属性装饰器
- 方法装饰器
- 参数装饰器
类装饰器
类装饰器是用于定义类用途的顶级装饰器。它们向 Angular 提供信息，表明某个类是组件还是模块。例如：
import { NgModule, Component } from '@angular/core';
@Component({
selector: 'event-thumbnail',
template: `<div>Event Thumbnail Works!</div>`,
})
export class EventThumbnailComponent {
constructor() {
console.log('Hey I am a component!');
}
}
@NgModule({
imports: [],
declarations: [],
providers: []
})
export class AppModule {
constructor() {
console.log('Hey I am a module!');
}
}
请注意，这两个类本身实际上是相同的。类中不需要任何代码来告诉 Angular 它是一个组件还是一个模块。
属性装饰器
属性装饰器用于装饰类中的特定属性。看一下@Input()。假设您在类中有一个属性，您希望它具有输入绑定。如果没有装饰器，您必须在类中定义此属性，以便 TypeScript 知道它，然后在其他地方告诉 Angular 您有一个要作为输入的属性。
属性装饰器的表达式将在运行时作为函数调用，并带有以下两个参数：
- 对于静态成员，可以是类的构造函数，对于实例成员，可以是类的原型。
- 成员的姓名。
使用装饰器，您可以简单地将@Input()装饰器放在属性上方，Angular 的编译器将自动根据属性名称创建输入绑定并链接它们。
import { Component, Input } from '@angular/core';
@Component({
selector: 'event-thumbnail',
template: '<div>Event Thumbnail Works!</div>'
})
export class EventThumbnailComponent {
@Input()
exampleProperty: string;
}
方法装饰器
方法装饰器使用功能来装饰类中的特定方法。它声明在方法声明之前。
装饰器应用于方法的属性描述符，可用于观察、修改或替换方法定义。方法装饰器不能在声明文件、重载或任何其他环境上下文中使用。
方法装饰器的表达式将在运行时作为函数调用，并带有以下三个参数：
- 对于静态成员，可以是类的构造函数，对于实例成员，可以是类的原型。
- 成员的姓名。
- 成员的属性描述符。
一个很好的例子是@HostListener。这告诉 Angular，当你的主机上发生事件时，你希望装饰的方法随事件一起被调用。
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'event-thumbnail',
template: '<div>Event Thumbnail Works!</div>'
})
export class EventThumbnailComponent {
@HostListener('click', ['$event'])
onHostClick(event: Event) {
// clicked, `event` available
}
}
参数装饰器
参数装饰器用于装饰类构造函数中的参数。例如 - @Inject。它告诉 Angular 您希望用什么来初始化该参数。
import { Component, Inject } from '@angular/core';
import { MyService } from './my-service';
@Component({
selector: 'event-thumbnail',
template: '<div>Event Thumbnail Works!</div>'
})
export class EventThumbnailComponent {
constructor(@Inject(MyService) myService) {
console.log(myService); // MyService
}
}
参数装饰器的表达式将在运行时作为函数调用，具有以下三个参数：
- 对于静态成员，可以是类的构造函数，对于实例成员，可以是类的原型。
- 成员的姓名。
- 函数参数列表中参数的序数索引。注意：参数装饰器只能用于观察方法上是否已声明参数。
结论
恭喜！您已经了解了 Angular 中不同类型的装饰器。您了解了设计 Angular 装饰器的基本概念。有关更多信息，请参阅TypeScript 中的装饰器。
了解更多
探索 Pluralsight 的这些 Angular 课程以继续学习：
- Angular JS 教程-Typescript 核心
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
