返回顶部
首页 > 资讯 > 前端开发 > VUE >Angular中的类装饰器有哪些
  • 709
分享到

Angular中的类装饰器有哪些

2024-04-02 19:04:59 709人浏览 泡泡鱼
摘要

这篇文章主要介绍了angular中的类装饰器有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。angular共有5种类装饰器,表明每个类的

这篇文章主要介绍了angular中的类装饰器有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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中使用为 <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: '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<string> = new EventEmitter<string>();
}

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

3. Directive

3.1 selector: string

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

  • 元素名或标签名

@Directive({
  selector: 'mo',
})
<mo></mo>
  • class

@Directive({
  selector: '.mo',
})
<div class=".mo"></div>
  • 属性名

@Directive({
  selector: '[mo]',
})
<div mo></div>
  • 属性名=属性值

@Directive({
  selector: '[type=text]',
})
<input type="text"></div>
  • 不包含某个选择器

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

@Directive({
  selector: 'div[mo]:not(.foo)',
})
<div mo class="foo"></div>

<div mo></div>

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

  • 匹配多个中的一个即可

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

@Directive({
  selector: '.foo, .bar',
})
<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: '[changeColor]',
 exportAs: 'changeColor'
})
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: '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: `
    <p>   {{ name | mo: id }} </span>
  `
})
class BankAccount {
    name: string = "deepthan"
    id:   number = 1;
}

感谢你能够认真阅读完这篇文章,希望小编分享的“Angular中的类装饰器有哪些”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网VUE频道,更多相关知识等着你来学习!

--结束END--

本文标题: Angular中的类装饰器有哪些

本文链接: https://lsjlt.com/news/85815.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Angular中的类装饰器有哪些
    这篇文章主要介绍了Angular中的类装饰器有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。angular共有5种类装饰器,表明每个类的...
    99+
    2024-04-02
  • es6装饰器有哪些
    这篇“es6装饰器有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“es6装饰器有哪些”...
    99+
    2024-04-02
  • Django中的装饰器有哪些用途
    身份验证和权限控制:可以使用装饰器来验证用户身份并控制其访问权限,例如@login_required装饰器可以确保只有已登录的用...
    99+
    2024-03-05
    Django
  • Python中的装饰器知识点有哪些
    这篇文章主要介绍“Python中的装饰器知识点有哪些”,在日常操作中,相信很多人在Python中的装饰器知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python中的装饰器知识点有哪些”的疑惑有所...
    99+
    2023-07-02
  • python装饰器的作用有哪些
    这期内容当中小编将会给大家带来有关python装饰器的作用有哪些,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。python是什么意思Python是一种跨平台的、具有解释性、编译性、互动性和面向对象的脚本语...
    99+
    2023-06-14
  • angular中的@Component装饰器怎么使用
    今天小编给大家分享一下angular中的@Component装饰器怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收...
    99+
    2024-04-02
  • Python中装饰器的应用场景有哪些
    这篇文章将为大家详细讲解有关Python中装饰器的应用场景有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。python主要应用领域有哪些1、云计算,典型应用OpenStack。2、WEB...
    99+
    2023-06-14
  • python常用装饰器有哪些
    python中常用的装饰器有以下几种@property@property是python的一种装饰器,常用于用来修饰方法。class DataSet(object):@propertydef method_with_property(self...
    99+
    2024-04-02
  • Python单元测试中有哪些装饰器
    Python单元测试中有哪些装饰器?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Python单元测试unittest中提供了一下四种装饰器实现测试跳过和预期故障...
    99+
    2023-05-31
    python 中有
  • Python装饰器的练习题有哪些
    这篇文章主要讲解了“Python装饰器的练习题有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python装饰器的练习题有哪些”吧!1.请实现一个装饰器,把函数的返回值+100然后返回d...
    99+
    2023-06-25
  • Angular中如何使用方法装饰器
    这篇“Angular中如何使用方法装饰器”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“An...
    99+
    2024-04-02
  • python装饰器管理函数和类的注意点有哪些
    这篇文章主要介绍了python装饰器管理函数和类的注意点有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。python的五大特点是什么python的五大特点:1.简单易学,...
    99+
    2023-06-14
  • Python装饰器有哪些绝妙的用法
    目录自定义第三方工具包内置装饰器的价值不言而喻,可以用来增强函数功能、简化代码、减少代码冗余。 它的使用场景同样很多,比较简单的场景包含打印日志、统计运行时间,这类例子和用法网上已经...
    99+
    2024-04-02
  • Python装饰器的使用方法有哪些
    这篇文章主要介绍了Python装饰器的使用方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Python装饰器的使用方法有哪些文章都会有所收获,下面我们一起来看看吧。装饰器的价值不言而喻,可以用来增强函数...
    99+
    2023-07-02
  • Python装饰器的定义形式有哪些
    这篇文章主要讲解了“Python装饰器的定义形式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python装饰器的定义形式有哪些”吧!前言装饰器(decorator)在Python框架...
    99+
    2023-07-04
  • Angular中的HostBinding和HostListener装饰器的使用场景
    这篇文章主要讲解了“Angular中的HostBinding和HostListener装饰器的使用场景”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Angu...
    99+
    2024-04-02
  • Angular中的元数据和装饰器怎么应用
    本篇内容主要讲解“Angular中的元数据和装饰器怎么应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Angular中的元数据和装饰器怎么应用”吧!作为“为大...
    99+
    2024-04-02
  • Python装饰器的相关知识点有哪些
    这篇文章主要介绍“Python装饰器的相关知识点有哪些”,在日常操作中,相信很多人在Python装饰器的相关知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python装饰器的相关知识点有哪些”的疑...
    99+
    2023-06-25
  • Python装饰器与类的装饰器怎么实现
    这篇“Python装饰器与类的装饰器怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python装饰器与类的装饰器怎么...
    99+
    2023-06-29
  • java权限修饰符的种类有哪些
    Java权限修饰符有四种,分别是: public:公共的,可以被任何其他类访问。 private:私有的,只能在定义该变量或方法的...
    99+
    2023-10-25
    java
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作