javascript - Angular - 是否可以执行一个 switch 语句而不是多个 @Input()？

Question

我正在以以下形式将一个属性传递到我的 Angular 组件中:

<my-component myAttribute></my-component>

为了更改组件中确定 width 和 height 的 CSS 的变量。

我还建立了预定义的属性值，以便输入:

<my-component large>

将设置 width 和 height 变量等于 100(处理后为 100px)。

但是，我很好奇我是否可以编写多个 @Input() 条件，而不会有很多单独的 @Input() ，或许使用一个 switch 语句来完成同样的工作？

我尝试了一点，但只在代码下收到了一片红色波浪线。

我的意见

size = 50 // Default value

  @Input('small') set small(value) {
    this.size = !value ? 25 : this.size;
  }

  @Input('medium') set medium(value) {
    this.size = !value ? 50 : this.size;
  }

  @Input('large') set large(value) {
    this.size = !value ? 100 : this.size;
  }

  @Input('x-large') set xlarge(value) {
    this.size = !value ? 200 : this.size;
  }

Answer 1

有一种方法，但它是......非常规的。我只能执行它，我不能告诉你是否应该使用它。因此，请自行承担风险。

此方法 (that you can find working here) 摆脱输入并使用组件的根元素:

export class HelloComponent {
  size = '120';

  attributes = {
    'x-small': 50,
    'small': 75,
    'medium': 100,
    'large': 125,
    'x-large': 150,
  };

  constructor(
    private el: ElementRef<HTMLElement>
  ) { }

  ngOnInit() {
    this.setSize();
  }

  private setSize() {
    const attr = Object.keys(this.attributes).forEach(attr => {
      const hasAttribute = this.el.nativeElement.hasAttribute(attr);
      this.size = hasAttribute && this.attributes[attr] || this.size;
    });
  }

  getSize() {
    const myStyle = {
      width: this.size + 'px',
      height: this.size + 'px'
    };
    return myStyle;
  }

}

它所做的基本上是尝试查找 attributes 对象中列出的属性，如果找到，则设置与该属性对应的值。

编辑 当您创建私有(private)函数时，它们只能在组件本身(某种程度上)上访问。这意味着它们不会对其他组件产生副作用，而且真的不必进行测试。

例如你可以测试这样的尺寸

it('should be 100px wide when setSize', () => {
  component['el'].nativeElement.setAttribute('medium', '');
  component.setSize();
  expect(component.size).toEqual(100);
});

它被称为实现细节:这有点像我之前告诉过你的:你的setSize 函数现在被抽象化了，你假设它有效并且你测试当你调用它时，你的大小实际上正在改变。

这意味着您不必测试 setSize 函数的内部，只要它的行为相应即可!

但是您必须测试所有可能性以防止副作用:例如，如果属性不是medium，而是exxxtra-large<会发生什么 ?这是您需要测试的案例。

这应该会加速您的测试!