广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

本篇文章带大家了解一下Angular中的5种类（class）装饰器，希望对大家有所帮助！

angular共有5种类装饰器，表明每个类的用途，angular用何种方式解析它。

把一个类标记为模块，并可以在这个类中配置这个模块中用到的数据。【相关教程推荐：《angular教程》】

它支持做如下配置：(下同)

导入本模块需要用到的模块，注意懒加载的模块不能导入，否则懒加载就没有作用了。

声明组件、指令、管道，这三个统称为可申明对象。

注册服务

其他模块若想使用本模块的组件、指令或管道，则需要将其抛出去。

为啥要抛出去？angular规定可声明对象应该且只能属于一个 NgModule。

告诉 Angular 哪些是动态组件，Angular 都会为其创建一个 ComponentFactory，并将其保存到 ComponentFactoryResolver 中。

若要写一个动态组件不仅要在这里加，还需要在declarations中申明。

当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。

该 NgModule 中允许使用的声明元素的 schema（HTML 架构）。 元素和属性（无论是 Angular 组件还是指令）都必须声明在 schema 中。

当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined，则该模块不会被注册进 getModuleFactory 中。

如果为 true，则该模块将会被 AOT 编译器忽略，因此始终会使用 JIT 编译。

一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。组件是特殊的指令，它的一部分属性继承自 Directive 装饰器。

css选择器名称, 可以是标签名、属性、class等，一般都是以标签来命名，具体见指令选择器部分。

如selector: 'mo-dir'在html中使用为 <mo-dir></mo-dir>也可以使用属性来定义, 如selector: '[mo-dir]'在html中使用为 <div mo-dir></div>

这两个同时只能用1个

一个或多个动画 trigger() 调用，包含一些 state() 和 transition() 定义。

服务可以在这里面注册就可以使用了

指定当前组件的变更检测策略。

组件传入的参数，相当于@Input。和@Input不同的是它是一个数组。

@Component({  selector: 'mo-dir',  inputs: [id: 123],  template: `   {{ id }}  `})class BankAccount {  id: number;}

inputs中的内容表示有个id属性，默认值是123。相当于@Input id: number = 123。

事件输出，相当于@Output，和@Output不同的是它是一个数组。

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}

相当于@output idChange: EventEmitter<string> = new EventEmitter<string>();。

它是一个css选择器， 用于在模板中标记出该指令，并触发该指令的实例化。可使用下列形式之一

@Directive({  selector: 'mo',})

<mo></mo>

@Directive({  selector: '.mo',})

<div class=".mo"></div>

@Directive({  selector: '[mo]',})

<div mo></div>

@Directive({  selector: '[type=text]',})

<input type="text"></div>

比如匹配有属性mo但是不包含class.foo

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}0

<div mo class="foo"></div><div mo></div>

上述指令第一个不会被匹配到，第二个会被匹配到。

可以同时写多个，如果匹配到其中一个即可，使用逗号隔开。

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}2

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}3

上述三个均会被添加上指令。

同组件

将服务注入进来使用

Take Advantage of the exportAs Property in Angular：

https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26

把指令以一个变量抛出去，供外部使用。

比如写了一个指令来修改文本颜色

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}4

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}5

指令通过属性[changeColor]获取到了p元素，之后通过exportAs把指令以changeColor变量抛了出去, 在html模板中以#changeColorRef接收指令实例，这时就可以用这个指令里的内容了。

官网讲得挺清楚：

Injectable：

https://angular.cn/api/core/Injectable

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}6

管道的作用是数据转换。

管道名称

自定义一个管道：

把名字和id传入到管道进行处理

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}7

@Component({  selector: 'mo-dir',  outputs: [ 'idChange' ]})class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>();}8

更多用法更新于 github：

https://github.com/deepthan/blog-angular

更多编程相关知识，请访问：编程视频！！

以上就是深入浅析Angular中的类（class）装饰器的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~