Angular Decorator 装饰器介绍-Toy模板网

这篇具有很好参考价值的文章主要介绍了Angular Decorator 装饰器介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

装饰器的作用就是在添加装饰器的地方在不改动原有代码的情况下增加额外的功能。Angular框架中装饰器是一个函数。他将元数据添加到类、类成员(属性、方法)和函数参数上。让它们在不需要做任何代码变动的前提下增加额外功能。

装饰器是什么

它是一个表达式
该表达式被执行后，返回一个函数
函数的入参分别为 targe、name 和 descriptor
执行该函数后，可能返回 descriptor 对象，用于配置 target 对象

装饰器的分类

类装饰器 (Class decorators)
属性装饰器 (Property decorators)
方法装饰器 (Method decorators)
参数装饰器 (Parameter decorators)

在Angular中提供了以下19个内置的装饰器

装饰器类型	内置装饰器
类装饰器 5个	@Component、@NgModule、@Pipe、@Injectabl、@Directive
属性装饰器 6个	@Input、@Output、@ContentChild、@ContentChildren、@ViewChild、@ViewChildren
方法装饰器 2个	@HostListener、@HostBinding
参数装饰器 6个	@Attribute、@Inject、@Optional、@Self、@SkipSelf、@Host

1 类装饰器
类装饰器负责把元数据附加到类上，以了解类的设计意图以及这个类是如何工作的。Angular框架里面类装饰器有多种．如下所示：

装饰器   解释   备注
@NgModule   模块装饰器(帮把相关的一些代码逻辑组织在一起)   NgModule 可以将其组件和一组相关代码(如服务)关联起来，形成功能单元。每个Angular应用都有一个根模块，通常命名为AppModule
@Component   组件装饰器   组件可以认为是屏幕上的一个视图．组件定义视图。每个Angular应用都至少有一个组件，也就是根组件
@Injectable   依赖装饰器(把一个类定义为服务)   组件使用服务。对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建服务类。
@Pipe   管道装饰器   管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)
@Directive   指令装饰器   用来控制组件的某些行为
1.1 @NgModule
@NgModule用来描述Angular应用里面的模块(NgModule)的。也就是说NgModule是一个带有@NgModule装饰器的类。@NgModule的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。

和其他语言一样，模块指的就是把某些功能整合到一起形成一个模块．模块话编程．
Angular应用是模块化的，拥有自己的模块化系统．一个模块就是一个NgModule。每个NgModule就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、或者某个工作流或一组紧密相关的功能。它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的NgModule定义。它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它NgModule使用。

每个Angular应用至少有一个模块，也就是根模块，习惯上命名为AppModule，位于一个名叫app.module.ts的文件中。引导这个根模块就可以启动你的应用。

1.1.1 @NgModule元数据解释
选项   类型   说明
providers?   Provider[]   列出当前模块需要的一些共用的服务，这样我们就可以在这个模块的各个组件中通过依赖注入使用这些服务了
declarations?   Array<Type   声明属于这个模块的指令,管道等等。模块内部Components/Directives/Pipes的列表
imports?   Array<Type | ModuleWithProviders | any[]>   当前模块需要依赖的一些其他的模块,这样做的目的就是使我们这个模块,可以直接使用别的模块exports提供的一些指令,组件等等
exports?   Array<Type | any[]>   当前模块需要导出的一些组件,指令,模块等，这样如果别的模块导入了我们这个模块,那么别的模块就可以直接使用我们在这里导出的组件,指令模块等
entryComponents?   Array<Type | any[]>   一个组件的集合，它应该和当前组件一起编译。对于这里列出的每个组件，Angular 都会创建一个 ComponentFactory 并保存进 ComponentFactoryResolver 中（动态组件）
bootstrap?   Array<Type | any[]>   应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性
schemas?   Array<SchemaMetadata | any[]>   不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明,允许设置的值有: NO_ERRORS_SCHEMA 和 CUSTOM_ELEMENTS_SCHEMA。NO_ERRORS_SCHEMA：当前模板中存在未知选择器时它不会显示错误；CUSTOM_ELEMENTS_SCHEMA：当前模板中可以使用任何类型的自定义元素，这有助于在应用程序中合并除Angular组件之外的Web组件
id?   string   它可以是一个名字或者一个路径，用来在调用getModuleFactory的时候区别模块,如果这个属性是undefined那么这个模块将不会被注册，如果有设置id,可以通过getModuleFactory()来获取到当前模块
jit?   true   如果是true，则当前模块使用JIT编译，否则使用AOT编译。JIT: 即Just-in-time,动态(即时)编译，边运行边编译。AOT: Ahead Of Time，指运行前编译。
1.1.2 NgModule作用：
NgModule 最主要的作用是帮助开发者组织业务代码，把关系比较紧密的一些功能(组件)代码组合在一起。

NgModule 用来控制组件、指令、管道等是否可以使用，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 NgModule 导出(exports )的内容，也就是说，如果你定义的 NgModule不exports任何内容，那么外部使用者即使 import了你这个模块，也没法使用里面定义的任何内容。

NgModule 是打包时候用到的最小单位，打包的时候会检查所有 @NgModule 和路由配置，Angular底层是使用webpack打包。因为Angular已经帮我们配置好了webpack，所以开发者轻松很多，否则就需要自己配置环境。

Angular装饰器介绍_tuacy的博客-CSDN博客

https://github.com/semlinker/angular2-ionic2/issues/9文章来源地址https://www.toymoban.com/news/detail-595219.html

到了这里，关于Angular Decorator 装饰器介绍的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！