转发: Angular装饰器

Angular中的装饰器是一个函数,它将元数据添加到类、类成员(属性、方法)和函数参数。

用法:要想应用装饰器,把它放在被装饰对象的上面或左边。

Angular使用自己的一套装饰器来实现应用程序各部件之间的相互操作。

这个地方是前面几个模块(Modules), 指令(Diretives)、组件(Components)、依赖注入(Dependency Injection)等从装饰器这个侧面的整理。

你需要做的:

1、搞清楚理解TypeScript的装饰器原理。

2、搞清楚这里面每一个装饰器的作用,解决的什么问题,应用场景。

类装饰器:

Angular有很多装饰器,它们负责把元数据附加到类上,以了解那些设计意图以及它们应怎样工作。

类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。

类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。

@Component标记类作为组件并收集组件配置元数据(继承Directive)

@Directive标记类作为指令并收集组件配置元数据

声明当前类是一个它令,并提供关于该指令的元数据。

@Pipe 声明当前类是一个管道,并且提供关于该管道的元数据

@Injectable标记元数据并可以使用Injector注放器注入

声明当前类有一些依赖,当依赖注入器创建该类的实例时,这些依赖应该被注入到构造函数中。

@NgModule

NgModule是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:

declaration-声明本模块中拥有的视图类。(Angular有三种视图类:组件、指令和管道)

exports-declaration的子集,可用于其它模块的组件模板。PS:模块导出声明。

imports-本模块声明的组件模板需要的类所在的其它模块。PS:模块导入声明

providers-服务的创建者,并加入到全局服务列表中,可用于应用任何部份。

bootstrap-指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

属性装饰器

属性装饰器表达式会在运行时当作函数被调用,

传入下列2个参数:

对于静态成员来说是类的构造函数,对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。

成员的名字。

 @Input 

声明一个输入属性,以便我们可以通过属性绑定更新它。

@Output

声明一个输出属性,以便我们可以通过事件绑定进行订阅。

@Hostbinding把宿主元素的属性(比如CSS类)绑定到指令/组件的属性

@HostListener

通过指令/组件的方法订阅宿主元素的事件

@ContentChild配置一个内容查询

@ViewChild配置一个视图查询

@ContentChildren配置多个内容查询(返回QueryList类型)

@ViewChildren配置多个视图查询(返回QueryList类型)

参数装饰器

参数装饰器表达式会在运行时当作函数被调用,

传入下列3个参数:

对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。

成员的名字。

参数在函数参数列表中的索引。

注意参数装饰器只能用来监视一个方法的参数能否被传入。

@Inject指定依赖关系的参数装饰器(一般用来注入被标记Injectable的类)

@Optional将依赖项标记为可选的参数元数据,如果没有找到依赖关系,注射器将提借null

@Self指定注射器只能从本身检索依赖关系

@SkipSelf指定注射器只能从父类检索依赖关系。

@Host按照依赖关系来检索。

补充:关于NgModule装饰器更全的说明,来自官方文档

@NgModule 元数据

下面是 @NgModule 元数据中属性的汇总表:


属性


说明


declarations


属于该模块的可声明对象(组件、指令和管道)的列表。

  1. 当编译模板时,你需要确定一组选择器,它们将用于触发相应的指令。
  2. 该模板在 NgModule 环境中编译 —— 模板的组件是在该 NgModule 内部声明的,它会使用如下规则来确定这组选择器:
    • 列在 declarations 中的所有指令选择器。
    • 从所导入的 NgModule 中导出的那些指令的选择器。

组件、指令和管道只能属于一个模块。 如果尝试把同一个类声明在多个模块中,编译器就会报告一个错误。

Components, directives, and pipes must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module.

不要重复声明从其它模块中导入的类。


providers


依赖注入提供商的列表。

A list of dependency-injection providers.

Angular 会使用该模块的注入器注册这些提供商。 如果该模块是启动模块,那就会使用根注入器。

当需要注入到任何组件、指令、管道或服务时,这些服务对于本注入器的子注入器都是可用的。

惰性加载模块有自己的注入器,它通常是应用的根注入器的子注入器。

惰性加载的服务是局限于这个惰性加载模块的注入器中的。 如果惰性加载模块也提供了 UserService,那么在这个模块的上下文中创建的任何组件(比如在路由器导航时),都会获得这个服务的本模块内实例,而不是来自应用的根注入器的实例。

其它外部模块中的组件也会使用它们自己的注入器提供的服务实例。

要深入了解关于多级注入器及其作用域,参见服务提供商


imports


要折叠(Folded)进本模块中的其它模块。折叠的意思是从被导入的模块中导出的那些软件资产同样会被声明在这里。

特别是,这里列出的模块,其导出的组件、指令或管道,当在组件模板中被引用时,和本模块自己声明的那些是等价的。

组件模板可以引用其它组件、指令或管道,不管它们是在本模块中声明的,还是从导入的模块中导出的。 比如,只有当该模块导入了 Angular 的 CommonModule(也可能从BrowserModule中间接导入)时,组件才能使用NgIfNgFor` 指令。

你可以从 CommonModule 中导入很多标准指令,不过也有些常用的指令属于其它模块。 比如,你只有导入了 Angular 的 FormsModule 时才能使用 [(ngModel)]


exports


可供导入了自己的模块使用的可声明对象(组件、指令、管道类)的列表。

导出的可声明对象就是本模块的公共 API。 只有当其它模块导入了本模块,并且本模块导出了 UserComponent 时,其它模块中的组件才能使用本模块中的 UserComponent

默认情况下这些可声明对象都是私有的。 如果本模块没有导出 UserComponent,那么就只有本模块中的组件才能使用 UserComponent

导入某个模块并不会自动重新导出被导入模块的那些导入。 模块 B 不会因为它导入了模块 A,而模块 A 导入了 CommonModule 而能够使用 ngIf。 模块 B 必须自己导入 CommonModule

一个模块可以把另一个模块加入自己的 exports 列表中,这时,另一个模块的所有公共组件、指令和管道都会被导出。

重新导出可以让模块被显式传递。 如果模块 A 重新导出了 CommonModule,而模块 B 导入了模块 A,那么模块 B 就可以使用 ngIf 了 —— 即使它自己没有导入 CommonModule


bootstrap


要自动启动的组件列表。

通常,在这个列表中只有一个组件,也就是应用的根组件。

Angular 也可以引导多个引导组件,它们每一个都在宿主页面中有自己的位置。

启动组件会自动添加到 entryComponents 中。


entryComponents


那些可以动态加载进视图的组件列表。

默认情况下,Angular 应用至少有一个入口组件,也就是根组件 AppComponent。 它用作进入该应用的入口点,也就是说你通过引导它来启动本应用。

路由组件也是入口组件,因为你需要动态加载它们。 路由器创建它们,并把它们扔到 DOM 中的 <router-outlet> 附近。

虽然引导组件和路由组件都是入口组件,不过你不用自己把它们加到模块的 entryComponents 列表中,因为它们会被隐式添加进去。

Angular 会自动把模块的 bootstrap 中的组件和路由定义中的组件添加到 entryComponents列表。

而那些使用不易察觉的ViewComponentRef.createComponent()的方式进行命令式引导的组件仍然需要添加。

动态组件加载在除路由器之外的大多数应用中都不太常见。如果你需要动态加载组件,就必须自己把那些组件添加到 entryComponents 列表中。

要了解更多,参见入口组件一章。

原文地址:https://www.cnblogs.com/KevinMO/p/9286843.html

时间: 2024-11-10 06:42:19

转发: Angular装饰器的相关文章

angular装饰器

@NgModule 元数据 NgModule 是一个带有 @NgModule() 装饰器的类.@NgModule() 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块.其中最重要的属性如下. declarations(可声明对象表) —— 那些属于本 NgModule 的组件.指令.管道. exports(导出表) —— 那些能在其它模块的组件模板中使用的可声明对象的子集. imports(导入表) —— 那些导出了本模块中的组件模板所需的类的其它模块. providers 

Angular中的装饰器

Angualr中的装饰器是一个函数,它将元数据添加到类.类成员(属性.方法)和函数参数 用法:要想用装饰器,把它放到被装饰对象的上面或做左面 1.类装饰器: 类装饰器应用于类构造函数,可以用来监控.修改或替换类定义 类装饰器表达式会在运行时当作函数被调用,类的构造函数作为唯一的参数 @Component 标记类作为组件并收集组件配置元数据(继承Directive) @Directive 标记类作为指令并收集组件配置元数据 声明当前类时一个指令,并提供关于该指令的元数据 @Pipc 声明当前类是一

转发对python装饰器的理解

[Python] 对 Python 装饰器的理解的一些心得分享出来给大家参考 原文  http://blog.csdn.net/sxw3718401/article/details/39519587 主题 Python 最近写一个py脚本来整理电脑中的文档,其中需要检校输入的字符,为了不使代码冗长,想到使用装饰器. 上网搜索有关python的装饰器学习文档,主要看的是 AstralWind的一篇博文,以及Limodou的一篇文章.作为初学者,这两篇文章对新手有很大的帮助,但仍然有些不易理解的地方

设计模式之装饰器模式

一.百科 概述: 23种设计模式之一,英文叫Decorator Pattern,又叫装饰者模式.装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 特点: (1) 装饰对象和真实对象有相同的接口.这样客户端对象就能以和真实对象相同的方式和装饰对象交互. (2) 装饰对象包含一个真实对象的引用(reference) (3) 装饰对象接受所有来自客户端的请求.它把这些请求转发给真实的对象. (4) 装饰对象可以在转发这些请

设计模式(八)装饰器模式Decorator(结构型)

设计模式(八)装饰器模式Decorator(结构型) 1. 概述 若你从事过面向对象开发,实现给一个类或对象增加行为,使用继承机制,这是所有面向对象语言的一个基本特性.如果已经存在的一个类缺少某些方法,或者须要给方法添加更多的功能(魅力),你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上. 通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是静态的,用户不能控制增加行为的方式和时机.如果  你希望改变一个已经初始化的对象的行为,你怎么办?或者,你希望继承许

Java常用的设计模式07:常用设计模式之装饰器模式

1. Java之装饰器模式(Decorator Pattern) (1)概述:     装饰模式在Java种使用也很广泛,比如我们在重新定义按钮.对话框等时候,实际上已经在使用装饰模式了.在不必改变原类文件和使用继承的情况下,动态    地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象.     装饰者模式:动态地给一个对象添加一些额外的职责,就像在墙上刷油漆一样.就增加功能来说,Decorator模式比生成子类更为灵活. Decorator模式的工作原理是:可以创建始

Java设计模式(四) 装饰器模式 代理器模式

(七)装饰器模式 Decorator 装饰器模式是为了动态的给一个对象增加一些新功能.装饰对象与被装饰的对象需要实现同一个接口,装饰对象持有被装饰对象的实例. interface DecoratorSourceable{ public void method(); } //被装饰类 class DecoratorSource implements DecoratorSourceable{ public void method(){ System.out.println("Source"

装饰器设计模式

通俗的讲装饰器就是在不改变对象结构的前提下,扩充对象的功能. 下面以effective java中例题 问题  我想扩充Hash<set>功能,使得能够统计添加过元素的个数? 或许你可能会自定义一个类通过继承扩展,从而实现计数功能,代码如下: package com.effectJava.Chapter2; import java.util.Arrays; import java.util.Collection; import java.util.HashSet; public class I

设计模式——代理模式与装饰器模式

代理模式 解决的问题:在直接访问对象时带来很大的开销.在面向对象系统中,有些对象由于某些原因(比如对象创建开销很大,或者某些操作需要安全控制,或者需要进程外的访问),直接访问会给使用者或者系统结构带来很多麻烦,我们可以在访问此对象时加上一个对此对象的访问层. 代理模式就相当于Windows 里面的快捷方式,它并不实现什么功能,而只是在中间加以控制:而装饰器模式为了增强功能. Java中的典型示例:静态代理:hibernate中的session.load()方法:动态代理:SpringAOP 代码