angular – 将多个主机绑定组合到一个装饰器中

@HostBinding('style.width.%')
@HostBinding('style.height.%')
private readonly SIZE = 100;

@HostBinding('style.display')
private readonly DISPLAY = 'block';

@HostBinding('style.box-sizing')
private readonly BOX_MODEL = 'border-box';

@Component(...)
export class MyAngularComponent extends HostBinderComponent {...}

export class HostBinderComponent {
  @HostBinding('style.width.%')
  @HostBinding('style.height.%')
  private readonly SIZE = 100;

  @boxComponent()
  private readonly DISPLAY;

  @HostBinding('style.box-sizing')
  private readonly BOX_MODEL = 'border-box';
}

@Component(...)
@BoxComponent()
export class MyAngularComponent {...}

应用装饰器涉及调用__decorate辅助函数.此函数既可以由编译器生成,也可以从自定义tslib中使用. Angular使用teh tslib模块作为__decorate函数,我们可以从那里使用__decorate. (我们可以复制版本ts生成或编写我们自己更简单的__decorate版本来调用装饰器函数,但最好只使用调用装饰器的相同方式,因为框架会使用)

有了这个功能(在检查TS如何调用字段的装饰器之后),我们可以轻松地创建自己的复合装饰器：

import { __decorate } from 'tslib';


function BoxHostBindings() {
  return function(target) {
    __decorate([
      HostBinding('style.width.%'),HostBinding('style.height.%'),],target.prototype,"SIZE",void 0);
    __decorate([
      HostBinding('style.display'),"DISPLAY",void 0);
    __decorate([
      HostBinding('style.box-sizing'),"BOX_MODEL",void 0);
  }
}

注意：我没有对此进行过广泛的测试,但似乎有效,我希望它能够正常工作.

用法：

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
@BoxHostBindings()
export class AppComponent {
  title = 'testapp';

  private readonly SIZE = 100;
  private readonly DISPLAY = 'block'
  private readonly BOX_MODEL = 'border-box';
}

编辑

设置属性的值有点困难.我们无法轻松访问构造函数执行,因此我们无法执行此操作.

一种选择是在原型上定义值,因为值是只读的,这应该可以正常工作：

function BoxHostBindings(size: number,display: string,box_model: string) {
  return function(target) {
    target.prototype.SIZE = size;
    target.prototype.DISPLAY = display;
    target.prototype.BOX_MODEL = box_model;
    __decorate([
      HostBinding('style.width.%'),void 0);
  }
}

我们还可以定义属性以允许用户修改值,并将其存储在字段(‘_’名称)中,但如果值未定义则返回默认值：

function BoxHostBindings(size: number,box_model: string) {
  return function(target) {
    function propHelper(name: string,defaultValue: any) {
      Object.defineProperty(target.prototype,name,{
        get: function () {
            return this['_' + name] || defaultValue;
        },set: function(value: any ) {
          this['_' + name] = value
        },enumerable: true,configurable: true
      });
    }
    propHelper("SIZE",size);
    propHelper("DISPLAY",display);
    propHelper("BOX_MODEL",box_model);
    __decorate([
      HostBinding('style.width.%'),void 0);
  }
}