目录
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

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

1.3. providers: []

注册服务

1.4 exports: Array

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

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

1.5 entryComponents: []

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

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

1.6 bootstrap:Array

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

1.7 schemas: Array

该 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中使用为 <mo-dir></mo-dir>
也可以使用属性来定义, 如selector: '[mo-dir]'在html中使用为 <div mo-dir></div>

2.2 template: string、templateUrl:string

这两个同时只能用1个

  • template 是直接写的html字符串,如<div>我是html内容</div>
  • 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不同的是它是一个数组。

@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不同的是它是一个数组。

@Component({
  selector: &#39;mo-dir&#39;,
  outputs: [ &#39;idChange&#39; ]
})
class ChildDir {
 idChange: EventEmitter<string> = new EventEmitter<string>();
}
登录后复制

相当于@output idChange: EventEmitter<string> = new EventEmitter<string>();

3. Directive

3.1 selector: string

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

  • 元素名或标签名
@Directive({
  selector: &#39;mo&#39;,
})
登录后复制
<mo></mo>
登录后复制
  • class
@Directive({
  selector: &#39;.mo&#39;,
})
登录后复制
<div class=".mo"></div>
登录后复制
  • 属性名
@Directive({
  selector: &#39;[mo]&#39;,
})
登录后复制
<div mo></div>
登录后复制
  • 属性名=属性值
@Directive({
  selector: &#39;[type=text]&#39;,
})
登录后复制
<input type="text"></div>
登录后复制
  • 不包含某个选择器

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

@Directive({
  selector: &#39;div[mo]:not(.foo)&#39;,
})
登录后复制
<div mo></div>
登录后复制

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

  • 匹配多个中的一个即可

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

@Directive({
  selector: &#39;.foo, .bar&#39;,
})
登录后复制
<div class="foo"></div>
<div class="bar></div>
<div class="foo bar"></div>
登录后复制

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

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

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

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

@Directive({
 selector: &#39;[changeColor]&#39;,
 exportAs: &#39;changeColor&#39;
})
class ChangeColorDirective {
    
    toggleColor() {
        // 修改颜色的逻辑
    }
}
登录后复制
<p changeColor #changeColorRef="changeColor"></p>

<button (click)="changeColorRef.toggleColor()"></button>
登录后复制

指令通过属性[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

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

5. pipe

管道的作用是数据转换。

5.1 name: string

管道名称

5.2 pure: boolean

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

自定义一个管道:

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

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出去
  }
}
登录后复制
@Component({
  selector: &#39;mo-dir&#39;,
  template: `
    <p>   {{ name | mo: id }} </span>
  `
})
class BankAccount {
    name: string = "deepthan"
    id:   number = 1;
}
登录后复制

更多用法更新于 github:

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

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

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

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 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的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

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

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

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

Angular.js是一种可自由访问的JavaScript平台,用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言,以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具,可帮助您编写、更新和测试代码。此外,它还提供了许多功能,如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先,您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境,可让您在服务器端运行JavaScript代码。要在Ub

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

你知道 Angular Universal 吗?可以帮助网站提供更好的 SEO 支持哦!

如何使用PHP和Angular进行前端开发 如何使用PHP和Angular进行前端开发 May 11, 2023 pm 04:04 PM

随着互联网的飞速发展,前端开发技术也在不断改进和迭代。PHP和Angular是两种广泛应用于前端开发的技术。PHP是一种服务器端脚本语言,可以处理表单、生成动态页面和管理访问权限等任务。而Angular是一种JavaScript的框架,可以用于开发单页面应用和构建组件化的Web应用程序。本篇文章将介绍如何使用PHP和Angular进行前端开发,以及如何将它们

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

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

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

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

浅析Angular中的独立组件,看看怎么使用 浅析Angular中的独立组件,看看怎么使用 Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

See all articles