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

}

它所做的基本上是试图找到在属性对象中列出的属性，如果找到它，它将设置与该属性相对应的值。

编辑：创建专用功能时，只能在组件本身（种类）上访问它们。这意味着它们不会对其他组件产生副作用，并且不必必须进行测试。

例如，您可以测试这样的尺寸

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

它被称为实施细节：就像我之前告诉过的：setSize函数现在已经抽象了，您认为它可以正常工作并且在您测试时进行测试称呼它，您的大小正在有效地改变。

这意味着您不必测试setSize函数的内部，只需测试它的行为即可！

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

这应该加快您的测试速度！

Answer 2

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

设置员（根据您当前的尝试）或

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

ngOnChanges

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-ngonchanges

使用设置器，假设尺寸是传入的对象，您可以这样做：

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

Answer 3

您可以控制和计算父组件中子组件的大小，并发送具有可变属性的对象。计算完此值后，您可以通过1个单一输入（例如size）接收此值。

父项

<my-component size="this.childSize"></my-component>

子组件

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

当然，您应该为childSize创建自己的类型，以指示并限制可能存在的属性。示例，您可以发送的对象。

{
 small: 15
}

{
 large: 35
}

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

3 个答案: