如果想让Angular2支持实验性的装饰器特性,需要在tsconfig.json
文件里启用experimentalDecorators
编译器选项。
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
装饰器
语法: @expression
,expression
求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。
定义@test
装饰器:
function test(target) {
// do something with "target" ...
// target就是所要修饰的目标类
}
类装饰器
类装饰器在类声明之前被声明,类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。
类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。
如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明。
首先定义一个装饰器:
function name(target) {
target.name = '小m'
}
在类中使用:
@name
class MyNameClass{}
console.log(MyNameClass.name) //小m
装饰器工厂
装饰器工厂就是一个简单的函数,它返回一个表达式,以供装饰器在运行时调用。
使用方法:
function isName(name) {
return function(target) {
target.name = name
}
}
@isName('小m')
class MyNameClass{}
MyNameClass.name // 小m