0

0

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

青灯夜游

青灯夜游

发布时间:2021-11-11 10:13:12

|

2246人浏览过

|

来源于掘金社区

转载

本篇文章带大家了解一下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中使用为
也可以使用属性来定义, 如selector: '[mo-dir]'在html中使用为

2.2 template: string、templateUrl:string

这两个同时只能用1个

  • template 是直接写的html字符串,如
    我是html内容
  • 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: 'mo-dir',
  inputs: [id: 123],
  template: `
   {{ id }}
  `
})
class BankAccount {
  id: number;
}

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

2.8 outputs:string[]

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

@Component({
  selector: 'mo-dir',
  outputs: [ 'idChange' ]
})
class ChildDir {
 idChange: EventEmitter = new EventEmitter();
}

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

VWO
VWO

一个A/B测试工具

下载

3. Directive

3.1 selector: string

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

  • 元素名或标签名
@Directive({
  selector: 'mo',
})
  • class
@Directive({
  selector: '.mo',
})
  • 属性名
@Directive({
  selector: '[mo]',
})
  • 属性名=属性值
@Directive({
  selector: '[type=text]',
})
  • 不包含某个选择器

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

@Directive({
  selector: 'div[mo]:not(.foo)',
})

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

  • 匹配多个中的一个即可

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

@Directive({
  selector: '.foo, .bar',
})

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

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: '[changeColor]',
 exportAs: 'changeColor'
})
class ChangeColorDirective {
    
    toggleColor() {
        // 修改颜色的逻辑
    }
}

指令通过属性[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: 'root',
})
  • 'root':大多数应用程序中的应用程序级注入器。
  • '平台':页面上所有应用程序共享的特殊单例平台注入器。
  • 'any':在每个注入令牌的模块(包括惰性模块)中提供唯一的实例。

5. pipe

管道的作用是数据转换。

5.1 name: string

管道名称

5.2 pure: boolean

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

自定义一个管道:

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

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mo',
})
export class MoPipe implements PipeTransform {
  transform(name: string, id: number): any {
    // 对传进来的数组进行处理,再return出去
  }
}
@Component({
  selector: 'mo-dir',
  template: `
    

{{ name | mo: id }} ` }) class BankAccount { name: string = "deepthan" id: number = 1; }

更多用法更新于 github:

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

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

相关专题

更多
Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

11

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

4

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

16

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.21

windows激活码分享 windows一键激活教程指南
windows激活码分享 windows一键激活教程指南

Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

2

2026.01.21

excel表格操作技巧大全 表格制作excel教程
excel表格操作技巧大全 表格制作excel教程

Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

6

2026.01.21

毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm
毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm

毒蘑菇VOLUMESHADER_BM测试网站网址为https://toolwa.com/vsbm/,该平台基于WebGL技术通过渲染高复杂度三维分形图形评估设备图形处理能力,用户可通过拖动彩色物体观察画面流畅度判断GPU与CPU协同性能;测试兼容多种设备,但中低端手机易卡顿或崩溃,高端机型可能因发热降频影响表现,桌面端需启用独立显卡并使用支持WebGL的主流浏览器以确保准确结果

25

2026.01.21

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

7

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue.js:纪录片
Vue.js:纪录片

共1课时 | 0.2万人学习

Angular js入门篇
Angular js入门篇

共17课时 | 3.5万人学习

XML教程
XML教程

共142课时 | 5.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号