Javascript 角度-是否可以执行一个switch语句而不是多个@Input（）语句？

我以以下形式将属性传递到我的角度分量：

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

将

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

---

将输入作为对象而不是数字传递。然后，您可以使用以下任一方法截取传递的值：

setter（根据您当前的尝试）或

恩贡切斯

使用setter，假设维度是传入的对象，则可以执行以下操作：

private _width = 0;
private _height = 0;

@Input()
set dimensions(dimensions: any) {
  this._width = dimensions.width
  this._height = dimensions.height
  // could put a switch case here
}

get width(): string { return this._width; }
get height(): string { return this._height; }

---

您可以控制和计算父组件中子组件的大小，并发送具有可变属性的对象。一旦您计算了这个值，您就可以通过一个输入来接收这个值，比如说

size

父组件

当然，您应该为

childSize

创建自己的类型，以指示和限制可能存在的属性。您可以发送的对象的示例

{
 small: 15
}

{
 large: 35
}

---

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

此方法（）除去输入并使用组件的根元素：

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

}

它被称为一个实现细节：这有点像我以前告诉过你的那样：你的

setSize

函数现在被抽象了，你假设它能工作，你测试当你调用它时，你的大小实际上在改变

这意味着您不必测试

setSize

函数的内部，只需测试它的相应行为即可

但是您必须测试所有可能性以防止副作用：例如，如果属性不是

中等

，而是

exxxtra大

，会发生什么情况？这是一个需要测试的案例

---

这会加快你的考试

我刚刚在现实世界的变量名中快速使用了StackBlitz subbing。是行

const-elAttributes=this.el.nativeElement.attributes真的有必要吗？在实际分配后，它不会被使用，经过进一步的调查，您可以去掉
forEach（（attr，i）
@physicsboy抱歉，我自己的IDE警告我未使用的变量，但不是stackblitz！至少它可以工作；-）现在我有了更改测试的乐趣，您可以将其作为一个实现细节呈现，您想要一个示例吗？
 private _size: any;

 @Input('size') set size(value) {
   this._size = value;

   const property = Object.keys(this.size)[0]; // expecting only 1 property

     switch (property):
       case 'small':
         // do something
         console.log(this.size[property]);
         break;
       case 'large':
         // do something
         break;
       default:
        // do something
   }

 public get size(): any {
   return this._size;
 }

{
 small: 15
}

{
 large: 35
}

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

}

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