Question

我有这个组件通过其选择器接收两个输入，但是这可以扩展到任意数量的输入和任何组件。因此，为了在组件本身中消耗多个属性，单个@Input()装饰器不允许我使用多个属性，因此作为一种解决方法，我使用两个装饰器来获得两个输入属性，但我不认为这将是解决这种情况的唯一方法。

export class AsyncComponent {
     @Input() waitFor: boolean;
     @Input() message: string; // TODO: Verify if multiple inputs are needed for multiple props
 }

更新

<app-async [waitFor]="true" message="foo"><app-async>

那么，是否可以使用任何其他方式将单个装饰器用于任意数量的输入道具？如果除了waitFor和message之外还有其他道具，我必须为每个道具做以下事情。

 @Input() waitFor: boolean;
 @Input() message: string;
 @Input() someOtherProp: string;
 ....

或者有没有其他方法可以只拥有一个Input装饰器并使用任意数量的属性？

Answer 1

我同意Roman C。

我只传递一个包含所有道具的对象（不是数组）：

@Component({
  selector: 'app-async'
})
export class AsyncComponent {
  // Single object with all props.
  @Input() props: { waitFor: boolean; message: string; };
}

然后是父组件：

@Component({
  template: '<app-async [props]="myProps"><app-async>'
})
export class ParentComponent {
  myProps = { waitFor: true, message: 'foo' };
}

NB。请注意，在输入属性上声明的接口不是ENFORCED。最佳做法是仍然声明它们，但JavaScript不能运行时检查TypeScript接口。此注释适用于此线程中的所有代码示例（单个输入，多个输入......）。

Answer 2

如果您需要使用数组或其他值的多个值，则无法实现

export class AsyncComponent {
     @Input() props: any[];

通过角度为2的输入装饰器消耗多个属性

2 个答案: