装饰器/注解就是一个函数,但它是一个返回函数的函数,它属于Typescript的特性,而非Angular的特性。
类装饰器(https://www.jianshu.com/p/57ed7747c45d):
@NgModule、@Component、@Injectable、@Pipe、@Directive
在使用Angular进行开发的时候,我们很多时候都是在设计Component、Module。在定义一个Component的时候,我们就是使用@Component进行注解声明的,如下图所示:
这里以@开始的语句和java中的注解的使用方式和作用都很类似,@Component可以让开发者通过Angular 的@Component创建一个类似Java的class,并同时提供额外的元数据,用于定义在运行环境中,这个component将如何运行/实例化以及被使用。
一、类装饰器:
装饰器 | 解释 | 备注 |
@NgModule | 模块装饰器(帮把相关的一些代码逻辑组织在一起) | 将其组件和一组相关代码(如服务)关联起来,形成功能单元。每个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中。