您应该为子组件定义多个还是只定义一个输入参数（包含所有值）答案

【问题标题】：Should you rather define several or only one input parameter (with all values) for child components您应该为子组件定义多个还是只定义一个输入参数（包含所有值）
【发布时间】：2020-12-26 16:01:02
【问题描述】：

我面临的问题是，我应该如何设置关于输入的 Angular 组件。

第一个变体是为每个给定值创建一个输入变量。这意味着您必须在调用时单独输入每个变量：

第二种变体是将所有需要的值打包在一个模型中，并且只包含这个模型。所以最后只有一个输入：

现在我不知道这两种变体中哪一种更适合具有许多组件的大型应用程序。

这两个中我应该更喜欢一个还是我不知道的更多？

【问题讨论】：

标签： html angular components

【解决方案1】：

这取决于您的组件信息您传递的信息，例如，如果组件是共享按钮，其中预期的输入可能是按钮名称、类、状态等。

在这种情况下，您可以使用一个对象而不是单独传递所有输入，比如 props，其中包含按钮属性。

export interface IButtonProps {
 text: string;
 class: string;
 disabled?: boolean;
}

buttonData: IButtonProps;

this.buttonData = {
  ...this.buttonData,
  text: 'Submit',
  class: 'primary',
  disabled: false
}

在模板中而不是传递单独的输入传递buttonData 的对象

<my-button [props]="buttonData"></my-button>

【讨论】：

【解决方案2】：

您的示例并不能很好地解释自己，但这里是：

如果您的输入都是相同的类型并用于相同的事情，那么将它们全部放在一个数组中并将它们传递给孩子并没有错。

代替：

[input]="'string1'" [input2]="'string2'" 你可以做[input]="['string1', 'string2']"

但是考虑一下：

[iconClass]="'my-icon-class'" [buttonClass]="'my-button-class'"

每个输入都做完全不同的事情，因此将它们放在数组中是非常糟糕的做法。

您还可以将所有输入放在object 中，例如：

input = { iconClass: 'my-icon-class', buttonClass: 'my-button-class' };
[input]="input"

只有在输入以某种方式相关或/和做同样的事情/修改子元素中的相同元素时，您才应该使用它。

【讨论】：