Angular：装饰器（注解）是什么？有什么作用？

装饰器/注解就是一个函数，但它是一个返回函数的函数，它属于Typescript的特性，而非Angular的特性。

@NgModule、@Component、@Injectable、@Pipe、@Directive

在使用Angular进行开发的时候，我们很多时候都是在设计Component、Module。在定义一个Component的时候，我们就是使用@Component进行注解声明的，如下图所示：

这里以@开始的语句和java中的注解的使用方式和作用都很类似，@Component可以让开发者通过Angular 的@Component创建一个类似Java的class，并同时提供额外的元数据，用于定义在运行环境中，这个component将如何运行/实例化以及被使用。

一、类装饰器：

装饰器	解释	备注
@NgModule 扫描二维码关注公众号，回复： 13275961 查看本文章	模块装饰器(帮把相关的一些代码逻辑组织在一起)	将其组件和一组相关代码(如服务)关联起来，形成功能单元。每个Angular应用都有一个根模块，通常命名为AppModule
@Component	组件装饰器	每个Angular应用都至少有一个组件，也就是根组件
@Injectable	依赖装饰器(把一个类定义为服务)	组件使用服务，对于与特定视图无关，并希望跨组件共享的数据或逻辑，可以创建服务类
@Pipe	管道装饰器	作用就是传输，并且不同的管道具有不同的作用(其实就是处理数据)
@Directive	指令装饰器	装饰指令类，用来控制组件的某些行为

二、属性装饰器：

装饰器	解释	备注
@Input	属性绑定(父组件向子组件传递数据)
@Output	事件绑定(子组件想父组件传递数据的同时触发事件)
@HostBinding	为宿主元素添加属性值
@HostListener	为宿主元素添加事件
@ContentChild	用于选择当前组件引用的内容(从ng-content中获取元素)	在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取
@ContentChildren	同上(不过是尽可能多的匹配，有多少匹配多少)	在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取
@ViewChild	从模板视图中获取匹配的元素(匹配到满足条件的第一个)	在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取
@ViewChildren	同上(不过@ViewChildren是尽可能多的匹配，有多少匹配多少)	在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取

列举元数据属性：

animations------------------规定了当前的动画表；

selector----------------------样式选择器，它可以在一个复杂的视图模板中识别出当前的component；

templateUrl-----------------视图模板的url；

styleUrls---------------------运用当前component中的一组样式表的url列表；

changeDetection------------通过这个component变更侦测策略；

encapsulation---------------通过该component设计封装策略；

exportAs---------------------名下component的实例化被导出在一个模板视图中；

host--------------------------class属性映射到host元素上，并绑定了事件和属性；

inputs------------------------当前class属性名列表，当前components输入的数据绑定；

outputs ----------------------当前class属性名列表，对外暴露输出事件，这样其他components就可以调用；

providers --------------------providers列表，该列表可以用于当前component和其子component；

template ---------------------视图模板；

interpolation------------------自定义改写工具，被用于当前的component视图模板中；

moduleld ---------------------文件中ES/CommonJS 模块的id,而当前component就定义在该模块中；

queries -----------------------将配置问题注入到当前component中。