ng-zorro源码解读--属性装饰器

jhon哥

于 2019-06-26 18:20:04 发布

阅读量2.8k

点赞数

分类专栏： Angular NgZorro源码解读 TypeScript 文章标签：属性装饰器

本文链接：https://blog.youkuaiyun.com/lwqxmu/article/details/93745575

版权

本文详细解读了ng-zorro中属性装饰器的使用，特别是@InputBoolean装饰器的工作原理。通过分析nzButton组件的示例，展示了属性装饰器如何创建内部属性、处理值的转换，并利用Angular CDK的coerceBooleanProperty函数确保值为布尔类型。总结了属性装饰器的一般应用模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性装饰器

属性装饰器表达式会在运行时当做函数被调用，传入的参数有两个：

1、对于静态成员来说是类的构造函数，对于实例是类的原型对象

2、属性名称

该方法应该返回一个函数，函数有两个上述的参数，并且在返回的函数中添加修改逻辑，如

@PropertyDecorator('value') prop;

function PropertyDecorator(value){
    return function(target,propName){
        .....
        target[propName] = value;
    }
}

在ng-zorro中，选择@InputBoolean属性装饰器说明实战例子。

在nzButton中的使用属性装饰器的一个例子如下：

@Input() @InputBoolean() nzBlock = false;
@Input() @InputBoolean() nzGhost = false;
@Input() @InputBoolean() nzSearch = false;
@Input() @InputBoolean() nzLoading = false;

属性装饰器会被当做函数来调用，所以InputBoolean是一个函数