2

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

感谢您的时间。

4

2 回答 2

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);
  }
}
于 2018-02-01T21:15:45.957 回答
0

您可以尝试基于属性定义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%}
于 2018-02-01T21:44:49.850 回答