Question

我有一个带数字输入的组件。并且基于该输入值，我想为组件设置宽度。我需要通过类来完成它，因为宽度是通过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}`);

感谢您的时间。

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，而不是只使用类

//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（使用参数？）

2 个答案: