目录
1. NgModule
1.1 imports
1.2.  declarations: Array<Type | any[]>
3.3 providers
1.4 exports: Array<Type | any[]>
1.5 entryComponents: []
1.6 bootstrap:Array<Type | any[]>
1.7 schemas: Array<SchemaMetadata | any[]>
1.8 id: string
1.9 jit: true
2. Component
3.1 selector: string
2.2 template: string、templateUrl:string
2.3 styles、styleUrls
2.4 animations
2.6 changeDetection
2.7 inputs: string[]
2.8 outputs:string[]
3. Directive
3.2 inputs、outputs: string[]
3.4 exportAs: string
3.5 queries、host、jit
4. Injectable
5. pipe
5.1 name: string
5.2 pure: boolean
首页 web前端 js教程 深入浅析Angular中的类(class)装饰器

深入浅析Angular中的类(class)装饰器

Nov 11, 2021 am 10:13 AM
angular 类装饰器

本篇文章带大家了解一下Angular中的5种类(class)装饰器,希望对大家有所帮助!

深入浅析Angular中的类(class)装饰器

angular共有5种类装饰器,表明每个类的用途,angular用何种方式解析它。

  • NgModule: 标明是一个模块
  • Component:标明是一个组件
  • Directive: 标明是一个指令
  • Injectable: 标明是一个服务
  • Pipe: 标明是一个管道

1. NgModule

把一个类标记为模块,并可以在这个类中配置这个模块中用到的数据。【相关教程推荐:《angular教程》】

它支持做如下配置:(下同)

1.1 imports

导入本模块需要用到的模块,注意懒加载的模块不能导入,否则懒加载就没有作用了。

1.2.  declarations: Array<Type | any[]>

声明组件、指令、管道,这三个统称为可申明对象。

1.3. providers: []

注册服务

1.4 exports: Array<Type | any[]>

其他模块若想使用本模块的组件、指令或管道,则需要将其抛出去。

为啥要抛出去?angular规定可声明对象应该且只能属于一个 NgModule。

1.5 entryComponents: []

告诉 Angular 哪些是动态组件,Angular 都会为其创建一个 ComponentFactory,并将其保存到 ComponentFactoryResolver 中。

若要写一个动态组件不仅要在这里加,还需要在declarations中申明。

1.6 bootstrap:Array<Type | any[]>

当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。

1.7 schemas: Array<SchemaMetadata | any[]>

该 NgModule 中允许使用的声明元素的 schema(HTML 架构)。 元素和属性(无论是 Angular 组件还是指令)都必须声明在 schema 中。

1.8 id: string

当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined,则该模块不会被注册进 getModuleFactory 中。

1.9 jit: true

如果为 true,则该模块将会被 AOT 编译器忽略,因此始终会使用 JIT 编译。

2. Component

一个装饰器,用于把某个类标记为 Angular 组件,并为它配置一些元数据,以决定该组件在运行期间该如何处理、实例化和使用。 组件是特殊的指令,它的一部分属性继承自 Directive 装饰器。

2.1 selector: string

css选择器名称, 可以是标签名、属性、class等,一般都是以标签来命名,具体见指令选择器部分。

selector: 'mo-dir'在html中使用为 &lt;mo-dir&gt;&lt;/mo-dir&gt;
也可以使用属性来定义, 如selector: '[mo-dir]'在html中使用为 &lt;div mo-dir&gt;&lt;/div&gt;

2.2 template: string、templateUrl:string

这两个同时只能用1个

  • template 是直接写的html字符串,如&lt;div&gt;我是html内容&lt;/div&gt;
  • templateUrl 是html文件路径地址

2.3 styles、styleUrls

  • styles 是直接写的css样式
  • styleUrls 是css文件路径地址

2.4 animations

一个或多个动画 trigger() 调用,包含一些 state() 和 transition() 定义。

2.5 providers

服务可以在这里面注册就可以使用了

2.6 changeDetection

指定当前组件的变更检测策略。

2.7 inputs: string[]

组件传入的参数,相当于@Input。和@Input不同的是它是一个数组。

1

2

3

4

5

6

7

8

9

10

@Component({

  selector: &#39;mo-dir&#39;,

  inputs: [id: 123],

  template: `

   {{ id }}

  `

})

class BankAccount {

  id: number;

}

登录后复制

inputs中的内容表示有个id属性,默认值是123。相当于@Input id: number = 123

2.8 outputs:string[]

事件输出,相当于@Output,和@Output不同的是它是一个数组。

1

2

3

4

5

6

7

@Component({

  selector: &#39;mo-dir&#39;,

  outputs: [ &#39;idChange&#39; ]

})

class ChildDir {

 idChange: EventEmitter&lt;string&gt; = new EventEmitter&lt;string&gt;();

}

登录后复制

相当于@output idChange: EventEmitter&lt;string&gt; = new EventEmitter&lt;string&gt;();

3. Directive

3.1 selector: string

它是一个css选择器, 用于在模板中标记出该指令,并触发该指令的实例化。可使用下列形式之一

  • 元素名或标签名

1

2

3

@Directive({

  selector: &#39;mo&#39;,

})

登录后复制

1

&lt;mo&gt;&lt;/mo&gt;

登录后复制
  • class

1

2

3

@Directive({

  selector: &#39;.mo&#39;,

})

登录后复制

1

&lt;div class=&quot;.mo&quot;&gt;&lt;/div&gt;

登录后复制
  • 属性名

1

2

3

@Directive({

  selector: &#39;[mo]&#39;,

})

登录后复制

1

&lt;div mo&gt;&lt;/div&gt;

登录后复制
  • 属性名=属性值

1

2

3

@Directive({

  selector: &#39;[type=text]&#39;,

})

登录后复制

1

&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;

登录后复制
  • 不包含某个选择器

比如匹配有属性mo但是不包含class.foo

1

2

3

@Directive({

  selector: &#39;div[mo]:not(.foo)&#39;,

})

登录后复制

1

2

3

<div mo class="foo"></div>

 

&lt;div mo&gt;&lt;/div&gt;

登录后复制

上述指令第一个不会被匹配到,第二个会被匹配到。

  • 匹配多个中的一个即可

可以同时写多个,如果匹配到其中一个即可,使用逗号隔开。

1

2

3

@Directive({

  selector: &#39;.foo, .bar&#39;,

})

登录后复制

1

2

3

&lt;div class=&quot;foo&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;bar&gt;&lt;/div&gt;

&lt;div class=&quot;foo bar&quot;&gt;&lt;/div&gt;

登录后复制

上述三个均会被添加上指令。

3.2 inputs、outputs: string[]

同组件

3.3 providers

将服务注入进来使用

3.4 exportAs: string

Take Advantage of the exportAs Property in Angular:

https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26

把指令以一个变量抛出去,供外部使用。

比如写了一个指令来修改文本颜色

1

2

3

4

5

6

7

8

9

10

@Directive({

 selector: &#39;[changeColor]&#39;,

 exportAs: &#39;changeColor&#39;

})

class ChangeColorDirective {

     

    toggleColor() {

        // 修改颜色的逻辑

    }

}

登录后复制

1

2

3

&lt;p changeColor #changeColorRef=&quot;changeColor&quot;&gt;&lt;/p&gt;

 

&lt;button (click)=&quot;changeColorRef.toggleColor()&quot;&gt;&lt;/button&gt;

登录后复制

指令通过属性[changeColor]获取到了p元素,之后通过exportAs把指令以changeColor变量抛了出去, 在html模板中以#changeColorRef接收指令实例,这时就可以用这个指令里的内容了。

3.5 queries、host、jit

官网讲得挺清楚:

  • queries:https://angular.cn/api/core/Directive#queries
  • host:https://angular.cn/api/core/Directive#host
  • jit:https://angular.cn/api/core/Directive#jit

4. Injectable

Injectable:

https://angular.cn/api/core/Injectable

1

2

3

@Injectable({

  providedIn: &#39;root&#39;,

})

登录后复制
  • 'root':大多数应用程序中的应用程序级注入器。
  • '平台':页面上所有应用程序共享的特殊单例平台注入器。
  • 'any':在每个注入令牌的模块(包括惰性模块)中提供唯一的实例。

5. pipe

管道的作用是数据转换。

5.1 name: string

管道名称

5.2 pure: boolean

  • true: 纯管道,transform方法只有在输入参数变化时参数会被调用
  • false: 该管道会在每个变更检测周期中都被调用一次 —— 即使其参数没有发生任何变化。

自定义一个管道:

把名字和id传入到管道进行处理

1

2

3

4

5

6

7

8

9

10

import { Pipe, PipeTransform } from &#39;@angular/core&#39;;

 

@Pipe({

  name: &#39;mo&#39;,

})

export class MoPipe implements PipeTransform {

  transform(name: string, id: number): any {

    // 对传进来的数组进行处理,再return出去

  }

}

登录后复制

1

2

3

4

5

6

7

8

9

10

@Component({

  selector: &#39;mo-dir&#39;,

  template: `

    &lt;p&gt;   {{ name | mo: id }} &lt;/span&gt;

  `

})

class BankAccount {

    name: string = &quot;deepthan&quot;

    id:   number = 1;

}

登录后复制

更多用法更新于 github:

https://github.com/deepthan/blog-angular

更多编程相关知识,请访问:编程视频!!

以上是深入浅析Angular中的类(class)装饰器的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

聊聊Angular中的元数据(Metadata)和装饰器(Decorator) 聊聊Angular中的元数据(Metadata)和装饰器(Decorator) Feb 28, 2022 am 11:10 AM

聊聊Angular中的元数据(Metadata)和装饰器(Decorator)

如何在Ubuntu 24.04上安装Angular 如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

如何在Ubuntu 24.04上安装Angular

angular学习之详解状态管理器NgRx angular学习之详解状态管理器NgRx May 25, 2022 am 11:01 AM

angular学习之详解状态管理器NgRx

浅析angular中怎么使用monaco-editor 浅析angular中怎么使用monaco-editor Oct 17, 2022 pm 08:04 PM

浅析angular中怎么使用monaco-editor

一文探究Angular中的服务端渲染(SSR) 一文探究Angular中的服务端渲染(SSR) Dec 27, 2022 pm 07:24 PM

一文探究Angular中的服务端渲染(SSR)

项目过大怎么办?如何合理拆分Angular项目? 项目过大怎么办?如何合理拆分Angular项目? Jul 26, 2022 pm 07:18 PM

项目过大怎么办?如何合理拆分Angular项目?

Angular + NG-ZORRO快速开发一个后台系统 Angular + NG-ZORRO快速开发一个后台系统 Apr 21, 2022 am 10:45 AM

Angular + NG-ZORRO快速开发一个后台系统

聊聊自定义angular-datetime-picker格式的方法 聊聊自定义angular-datetime-picker格式的方法 Sep 08, 2022 pm 08:29 PM

聊聊自定义angular-datetime-picker格式的方法

See all articles