这篇文章主要介绍了angular中的类装饰器有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。angular共有5种类装饰器,表明每个类的
这篇文章主要介绍了angular中的类装饰器有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
angular共有5种类装饰器,表明每个类的用途,angular用何种方式解析它。
NgModule
: 标明是一个模块
Component
:标明是一个组件
Directive
: 标明是一个指令
Injectable
: 标明是一个服务
Pipe
: 标明是一个管道
NgModule
把一个类标记为模块,并可以在这个类中配置这个模块中用到的数据。【相关教程推荐:《angular教程》】
它支持做如下配置:(下同)
导入本模块需要用到的模块,注意懒加载的模块不能导入,否则懒加载就没有作用了。
声明组件、指令、管道,这三个统称为可申明对象。
注册服务
其他模块若想使用本模块的组件、指令或管道,则需要将其抛出去。
为啥要抛出去?angular规定可声明对象应该且只能属于一个 NgModule。
告诉 Angular 哪些是动态组件,Angular 都会为其创建一个 ComponentFactory,并将其保存到 ComponentFactoryResolver 中。
若要写一个动态组件不仅要在这里加,还需要在declarations
中申明。
当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。
该 NgModule 中允许使用的声明元素的 schema(html 架构)。 元素和属性(无论是 Angular 组件还是指令)都必须声明在 schema 中。
当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined,则该模块不会被注册进 getModuleFactory 中。
如果为 true,则该模块将会被 AOT 编译器忽略,因此始终会使用 JIT 编译。
一个装饰器,用于把某个类标记为 Angular 组件,并为它配置一些元数据,以决定该组件在运行期间该如何处理、实例化和使用。 组件是特殊的指令,它的一部分属性继承自 Directive 装饰器。
CSS选择器名称, 可以是标签名、属性、class等,一般都是以标签来命名,具体见指令选择器部分。
如selector: 'mo-dir'
在html中使用为 <mo-dir></mo-dir>
也可以使用属性来定义, 如selector: '[mo-dir]'
在html中使用为 <div mo-dir></div>
这两个同时只能用1个
template 是直接写的html字符串,如<div>我是html内容</div>
templateUrl 是html文件路径地址
styles 是直接写的css样式
styleUrls 是css文件路径地址
一个或多个动画 trigger() 调用,包含一些 state() 和 transition() 定义。
服务可以在这里面注册就可以使用了
指定当前组件的变更检测策略。
组件传入的参数,相当于@Input
。和@Input
不同的是它是一个数组。
@Component({
selector: 'mo-dir',
inputs: [id: 123],
template: `
{{ id }}
`
})
class BankAccount {
id: number;
}
inputs中的内容表示有个id属性,默认值是123。相当于@Input id: number = 123
。
事件输出,相当于@Output
,和@Output
不同的是它是一个数组。
@Component({
selector: 'mo-dir',
outputs: [ 'idChange' ]
})
class ChildDir {
idChange: EventEmitter<string> = new EventEmitter<string>();
}
相当于@output idChange: EventEmitter<string> = new EventEmitter<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>
上述三个均会被添加上指令。
同组件
将服务注入进来使用
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
接收指令实例,这时就可以用这个指令里的内容了。
官网讲得挺清楚:
host:https://angular.cn/api/core/Directive#host
jit:https://angular.cn/api/core/Directive#jit
Injectable:
https://angular.cn/api/core/Injectable
@Injectable({
providedIn: 'root',
})
'root':大多数应用程序中的应用程序级注入器。
'平台':页面上所有应用程序共享的特殊单例平台注入器。
'any':在每个注入令牌的模块(包括惰性模块)中提供唯一的实例。
管道的作用是数据转换。
管道名称
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
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0