转发: 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
元数据中属性的汇总表:
属性 |
说明 |
---|---|
|
属于该模块的可声明对象(组件、指令和管道)的列表。
组件、指令和管道只能属于一个模块。 如果尝试把同一个类声明在多个模块中,编译器就会报告一个错误。 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. 不要重复声明从其它模块中导入的类。 |
|
依赖注入提供商的列表。 A list of dependency-injection providers. Angular 会使用该模块的注入器注册这些提供商。 如果该模块是启动模块,那就会使用根注入器。 当需要注入到任何组件、指令、管道或服务时,这些服务对于本注入器的子注入器都是可用的。 惰性加载模块有自己的注入器,它通常是应用的根注入器的子注入器。 惰性加载的服务是局限于这个惰性加载模块的注入器中的。 如果惰性加载模块也提供了 其它外部模块中的组件也会使用它们自己的注入器提供的服务实例。 要深入了解关于多级注入器及其作用域,参见服务提供商。 |
|
要折叠(Folded)进本模块中的其它模块。折叠的意思是从被导入的模块中导出的那些软件资产同样会被声明在这里。 特别是,这里列出的模块,其导出的组件、指令或管道,当在组件模板中被引用时,和本模块自己声明的那些是等价的。 组件模板可以引用其它组件、指令或管道,不管它们是在本模块中声明的,还是从导入的模块中导出的。 比如,只有当该模块导入了 Angular 的 你可以从 |
|
可供导入了自己的模块使用的可声明对象(组件、指令、管道类)的列表。 导出的可声明对象就是本模块的公共 API。 只有当其它模块导入了本模块,并且本模块导出了 默认情况下这些可声明对象都是私有的。 如果本模块没有导出 导入某个模块并不会自动重新导出被导入模块的那些导入。 模块 B 不会因为它导入了模块 A,而模块 A 导入了 一个模块可以把另一个模块加入自己的 重新导出可以让模块被显式传递。 如果模块 A 重新导出了 |
|
要自动启动的组件列表。 通常,在这个列表中只有一个组件,也就是应用的根组件。 Angular 也可以引导多个引导组件,它们每一个都在宿主页面中有自己的位置。 启动组件会自动添加到 |
|
那些可以动态加载进视图的组件列表。 默认情况下,Angular 应用至少有一个入口组件,也就是根组件 路由组件也是入口组件,因为你需要动态加载它们。 路由器创建它们,并把它们扔到 DOM 中的 虽然引导组件和路由组件都是入口组件,不过你不用自己把它们加到模块的 Angular 会自动把模块的 而那些使用不易察觉的 动态组件加载在除路由器之外的大多数应用中都不太常见。如果你需要动态加载组件,就必须自己把那些组件添加到 要了解更多,参见入口组件一章。 |
转发: Angular装饰器的更多相关文章
- angular装饰器
@NgModule 元数据 NgModule 是一个带有 @NgModule() 装饰器的类.@NgModule() 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块.其中最重要的 ...
- 【Angular专题】 (3)装饰器decorator,一块语法糖
目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- Angular 之装饰器@Input
Input 一个装饰器,用来把某个类字段标记为输入属性,并提供配置元数据. 该输入属性会绑定到模板中的某个 DOM 属性.当变更检测时,Angular 会自动使用这个 DOM 属性的值来更新此数据属性 ...
- 转发:python 装饰器--这篇文章讲的通俗易懂
转 http://www.cnblogs.com/wupeiqi/articles/4980620.html 1.必备 #### 第一波 #### def foo(): print 'foo' ...
- 转发对python装饰器的理解
[Python] 对 Python 装饰器的理解的一些心得分享出来给大家参考 原文 http://blog.csdn.net/sxw3718401/article/details/3951958 ...
- 装饰器模式(Decorator)
转自http://blog.csdn.net/hust_is_lcd/article/details/7884320 1.认识装饰器模式 装饰模式能够实现动态的为对象添加功能,是从一个对象外部来给对象 ...
- Java设计模式07:常用设计模式之装饰器模式(结构型模式)
1. Java之装饰器模式(Decorator Pattern) (1)概述: 装饰模式在Java种使用也很广泛,比如我们在重新定义按钮.对话框等时候,实际上已经在使用装饰模式了.在不必改变原 ...
- 设计模式(八)装饰器模式Decorator(结构型)
设计模式(八)装饰器模式Decorator(结构型) 1. 概述 若你从事过面向对象开发,实现给一个类或对象增加行为,使用继承机制,这是所有面向对象语言的一个基本特性.如果已经存在的一个类缺少某些方法 ...
随机推荐
- slice()方法 和splice 方法的区别
定义 splice() 方法 用于插入.删除或替换数组的元素. slice() 方法 可提取字符串的某个部分,并以新的字符串返回被提取的部分. 更多的可查看: http://www.cnblogs.c ...
- JavaScript 小实例 - 表单输入内容检测,对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
- C# Winform选项卡集成窗体
知识要点:利用反射动态的加载窗体到对应的TabPage的. using System; using System.Collections.Generic; using System.Component ...
- 平均负载(Load average)
load average 的含义平均负载(load average)是指系统的运行队列的平均利用率,也可以认为是可运行进程的平均数. top命令中load average显示的是最近1分钟.5分钟和1 ...
- linux-软件下载安装
RPM 安装 rpm -ivh 包全名 :-i(install):安装:-v(verbose):显示详细信息:-h(hash):显示进度: rpm -Uvh 包全名:-U(upgrate):升级 rp ...
- 使用JSONP彻底解决Ajax跨域访问Cookie Session的方案
最近做开发时要把图片文件放到另外一台服务器上(另外一个域名),因为这样分布式存放,网站打开速度会快很多.而我采用AJAX获取图片服务器上某用户的图片时遇到了问题,按照通常的方式无法获取信息,得到的Co ...
- Delphi XE7功能之TMultiView
TMultView,做为一个TPanel来显示控件,可通过属性Mode来控制TMultView的显示效果,如下拉或者以抽屉方式.从屏一侧象抽屉一样显示TMultView,但不会转换主屏,也就是说在主窗 ...
- Effective C++(5) 了解C++默默地编写并调用哪些函数
预热: 一个空的类,当编译器处理过之后,就包含: 一个copy构造函数 一个重载赋值操作符 一个析构函数 一个默认构造函数 Demo: class Empty() { }; // 声明一个空的类 cl ...
- CC2530 LED灯控制
有三个寄存器 分别是功能寄存器.方向寄存器.配置寄存器 功能寄存器 通用 I/O口 说的就是一般的I/O口,可以输出高低电平 为外设IO 例如摄像头或者打印机他们具体实现某些功能(拍照或打印文档) ...
- 沉淀再出发:Spring的架构理解
沉淀再出发:Spring的架构理解 一.前言 在Spring之前使用的EJB框架太庞大和重量级了,开发成本很高,由此spring应运而生.关于Spring,学过java的人基本上都会慢慢接触到,并且在 ...