Angular 角度绑定（使用参数获取？）

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

所以我有三个不同宽度的类。根据输入，我想设置一个类。我已经让它工作了，但它非常丑陋，我觉得在我的代码中有这样的内容像个白痴：

@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}`);

---

谢谢您的时间。

主机绑定应该是静态定义的。接受不允许动态行为的字符串参数

应在元素上添加和删除类，类似于在

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);
  }
}

---

您可以尝试基于属性定义css，而不是仅使用类

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

//or 

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

---

难道你不能在你的组件中有一个容器div和必需的类吗？我会检查一下，但我不喜欢在我的模板中有多余的html元素。这样做是可能的，它应该可以通过编程实现，而且它不应该像我的代码那样难看。但是谢谢你的建议。虽然不是我想要的，但比我的好。我会尝试一下，谢谢。问题是这只适用于

layoutinex=“1”

，像

[layoutinex]=“1”

这样的绑定不会产生DOM属性。我不确定你的意思是什么？（但我还没有试过我在回答中所写的内容）哦，这看起来很棒，我没有想到。我会试试看，如果行得通，我会接受你的答案。非常感谢你。

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