Angular装饰器介绍-Toy模板网

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

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

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<any>	声明属于这个模块的指令,管道等等。模块内部Components/Directives/Pipes的列表
imports?	Array<Type<any> \| ModuleWithProviders \| any[]>	当前模块需要依赖的一些其他的模块,这样做的目的就是使我们这个模块,可以直接使用别的模块exports提供的一些指令,组件等等
exports?	Array<Type<any> \| any[]>	当前模块需要导出的一些组件,指令,模块等，这样如果别的模块导入了我们这个模块,那么别的模块就可以直接使用我们在这里导出的组件,指令模块等
entryComponents?	Array<Type<any> \| any[]>	一个组件的集合，它应该和当前组件一起编译。对于这里列出的每个组件，Angular 都会创建一个 ComponentFactory 并保存进 ComponentFactoryResolver 中（动态组件）
bootstrap?	Array<Type<any> \| 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，所以开发者轻松很多，否则就需要自己配置环境。

1.2 @Directive

@Directive修饰的类是指令类。在Angular应用中指令一般用来控制组件(ＤＯＭ)的某些行为。Angular框架也默认给我们提供很多指令，有结构型指令，属性型指令。

结构型指令: 通过添加和移除DOM元素改变DOM布局的指令．如NgFor和NgIf．
属性型指令: 改变元素、组件或其它指令的外观和行为的指令。如NgStyle 和NgSwitch．

1.1.1 @Directive元数据解释

选项	类型	说明
selector?	string	css选择器名，用于在模板中标记出该指令（组件），并触发其实例化
inputs?	string[]	该指令(组件)的输入参数，和@Input装饰器的作用是相同的
outputs?	string[]	该指令(组件)可供事件绑定的输出属性
host?	{[key: string]: string;}	使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）
providers?	Provider[]	服务提供商的集合
exportAs?	string	一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们
queries?	{[key:string]:any}	配置将要注入到该指令中的一些查询。内容查询会在调用 ngAfterContentInit 回调之前设置好。试图查询会在调用 ngAfterViewInit 回调之前设置好。

inputs和outputs: 当前指令(组件)的输入和输出。但是最新的Angular版本已经不推荐使用这两个属性了，推荐使用@Input()，@Output()来代替。

@Component({
  selector: 'app-report-template',
  template:
    `
       <div>
         <pre>{{hero}}</pre>
         <button (click)="deleteRequestInit()">Get</button>
       </div>
     `,
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})
export class ReportTemplateComponent {

  public deleteRequest = new EventEmitter();

  deleteRequestInit() {
    this.deleteRequest.emit({'message': 'Are you sure you want to delete this record!.'})
  }
}

// 等价于下面的代码

@Component({
  selector: 'app-report-template',
  template:
    `
       <div>
         <pre>{{hero}}</pre>
         <button (click)="deleteRequestInit()">Get</button>
       </div>
     `,
})
export class ReportTemplateComponent {

  @Input()
  hero;

  @Output()
  deleteRequest = new EventEmitter<any>();

  deleteRequestInit() {
    this.deleteRequest.emit({'message': 'Are you sure you want to delete this record!.'})
  }
}

链接：https://www.jianshu.com/p/57ed7747c45d
文章来源地址https://www.toymoban.com/news/detail-803086.html

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