angular中的装饰器 详解

作者: 熊孩子CEO | 来源:发表于2017-05-22 23:01 被阅读609次

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

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

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

这个地方是前面几个模块模块、指令、组件、依赖注入等从装饰器这个侧面的整理

你需要做的:

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

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

类装饰器

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

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

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

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

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

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

@Pipe

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

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

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

@NgModule

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

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

exports - declarations的子集,可用于其它模块的组件模板。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按照依赖关系来检索

ps:内容来自百度整理  不对的地方希望大神指出


相关文章

  • angular中的装饰器 详解

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

  • angular中的装饰器 详解

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

  • python 装饰器

    参考链接:详解Python的装饰器

  • python中的装饰器

    python装饰器详解 Python装饰器学习(九步入门) 装饰器(decorator) 就是一个包装机(wrap...

  • angular组件

    Angular组件 @Component装饰器 @Component装饰器用于标示这个类是组件类 selector...

  • Angular组件介绍

    1.背景介绍 Angular组件的必备元素 1.组件元数据装饰器:@Component() 告诉angular如何...

  • 学习记录

    Python基础中的高级专题装饰器详解:https://www.bilibili.com/video/av1275...

  • 装饰器详解

    装饰器详解 简单实例教程 需要装饰的函数 装饰器的参数是方法名,就是被装饰的函数 被装饰的函数需要这样写 调用 结...

  • angular-装饰器

    装饰器在angular中大量使用,有必要单独拎出来说一下。装饰器顾名思义,就是装饰用的,装饰什么呢?主要是类、属性...

  • 一种angular的方法级的缓存注解(装饰器)

    使用es6中装装饰器能做很多事情,今天分享一种在angular使用装饰器进行方法调用缓存的功能。 应用场景是这样的...

网友评论

本文标题:angular中的装饰器 详解

本文链接:https://www.haomeiwen.com/subject/qkoixxtx.html