Angular HostBinding（获取参数？）

Question

我有一个带有数字输入的组件。根据该输入值，我想为组件设置一个宽度。我需要通过 class 来完成，因为宽度是通过 sass 变量计算的，它可能会被更改。

所以我有三个不同宽度的 classes。根据输入，我想设置一个 class. 我让它工作了，但它非常丑陋，我觉得在我的代码中有这个是个白痴：

@Input() public layoutColumns: number = 3;

@HostBinding('class.width-1') get isLayout1() { return this.layoutColumns === 1; }
@HostBinding('class.width-2') get isLayout2() { return this.layoutColumns === 2; }
@HostBinding('class.width-3') get isLayout3() { return this.layoutColumns === 3; }

是否有可能以某种方式为 get 函数提供参数，这样我就不必拥有其中的三个？ 或者是出于某些原因，这很愚蠢吗？

或者你知道其他更好的方法吗？ 或者如果这样的事情是可能的：

@HostBinding(`class.width-${layoutColumn}`);

感谢您的宝贵时间。

Answer 1

主机绑定应该是静态定义的。 HostBinding 接受不为动态行为留余地的字符串参数。

应在元素上添加和删除

类，类似于 ngClass 指令中的操作：

constructor(private renderer2: Renderer2, private elementRef: ElementRef) {}

ngOnChanges({ layoutColumns }) {
  if (layoutColumns) {
    if (layoutColumns.previousValue)
      this.renderer2.removeClass(this.elementRef.nativeElement,
        'width-' + layoutColumns.previousValue);

    if (layoutColumns.currentValue)
      this.renderer2.addClass(this.elementRef.nativeElement,
       'width-' + layoutColumns.currentValue);
  }
}

Answer 2

您可以尝试根据属性

定义 css 而不是仅使用 class

//Component.ts
@HostBinding('attr.layoutIndex') layoutColumns : <type>;

//or 

@HostBinding('attr.layoutIndex') get layoutIndex(){return this.layoutColumns;}

并且在您的 css 文件中

//component.scss
[layoutIndex=1] {width: 100%}
[layoutIndex=2] {width: 50%}

Angular HostBinding（获取参数？）

Angular HostBinding (get with parameter?)

angular2-hostbinding

angular