转发: 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. 概述 若你从事过面向对象开发,实现给一个类或对象增加行为,使用继承机制,这是所有面向对象语言的一个基本特性.如果已经存在的一个类缺少某些方法 ...
随机推荐
- JavaScript如何比较两个数组的内容是否相同【转】
比较2个数组是否相等的. 不能像字符样 简单的用 == === 比较 ([]==[]); // false ([]===[]); // false 都是false -------------- ...
- [翻译] SlideInView
SlideInView This is a quick and lightweight example of how to present a notification like view from ...
- [翻译] EAColourfulProgressView
EAColourfulProgressView 效果: EAColourfulProgressView is a custom progress view where the current fill ...
- Python学习---Python安装与基础1205
1.0. 安装 1.1.1. 下载 官网下载地址:https://www.python.org/downloads/release/python-352/ 1.1.2. 配置环境变量 因为在安装的时候 ...
- Python实例---简单购物车Demo
简单购物车Demo # version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 product_list = ( ['Java ...
- 获取当前模块句柄(dll、exe)
HMODULE getCurrModuleHandle(){ MEMORY_BASIC_INFORMATION info; ::VirtualQuery((LPCVOID)(&getCurrM ...
- Linux常用软件安装
1. 修改Linux的基本配置 1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=server1.itcast.cn 2.修改ip地址 ...
- 021.1 IO流——File类
########################################IO流: IO:用于处理设备上的数据的技术.设备:内存,硬盘,光盘 流:系统资源,Windows系统本身就可 ...
- .Net Intelligencia.UrlRewriter 重定向参数中文支持配置方法
在使用.Net 官方 Url重定向组件时,发现若原地址包含中文,如:http://localhost/首页.html 重定向为:http://localhost/index.aspx?id=首页 时 ...
- 配置Ceph集群为OpenStack后端存储
配置Ceph存储为OpenStack的后端存储 1 前期配置 Ceph官网提供的配置Ceph块存储为OpenStack后端存储的文档说明链接地址:http://docs.ceph.com/docs/ ...