在角元件中使用大量的输入是不好的吗？

Question

在一个大型项目中，我们决定创建一个按钮组件。我们为我们所需要的大部分东西添加了输入，最后，它总结为20个输入。

  @Input() body: string;
  @Input() chevron: "right" | "left" | "none" = "none";
  @Input() chevronDown: "right" | "left" | "none" = "none";
  @Input() padding: "small" | "normal" = "normal";
  @Input() shade: "dark" | "light" = "dark";
  @Input() active: boolean = false;
  @Input() color: "primary" | "transparent" | "danger" | "warning" | "secondary" | "success" = "primary";
  @Input() buttonType: "button" | "menu" | "reset" | "submit" = "button";
  @Input() disabled: boolean = false;
  @Input() icon: "plus" | "three-dots" | "x" | "chevron-down" | "chevron-up" | "pen" | "grid" | "funnel";
  @Input() helper: string;
  @Input() fontSize: "x-small" | "small" | "normal" = "normal";
  @Input() textAlign: "left" | "center" | "right" = "left";
  @Input() spinner: "left" | "right" | "none" = "none";
  @Input() disableWhenSpin: boolean = true;
  @Input() fontWeight: number = 400;
  @Input() width: "full" | "normal" = "normal";
  @Input() hiddenAfter: "md" | "none" = "none";
  @Input() hiddenBefore: "md" | "none" = "none";
  @Input() checkbox = false;
  @Input() checked = false;

我们在模板中添加了图标，并有条件地用输入来呈现它们。但大多数情况下，我们没有提供有条件的投入：

  <app-button body="Cancel"
                    padding="small"
                    color="transparent"
                    (onClick)="cancelEmitter.emit()"></app-button>

因此，我们不提供有条件的输入(比如彩色insead )，将这么多输入和html添加到组件中是不好的。而且根据输入角删除非unnessecary html和js逻辑，如果是这样的话，这也不应该是一个问题吗？

Answer 1

从代码质量的角度来看，拥有如此多的输入有点不好的。支持这一观点的主要论点是--当您编写这样一个定义按钮时，假设是9个输入(我认为您不需要一次定义所有输入)，这将使代码不太复杂，不仅很难阅读，而且很难维护。

那么，，我们能做什么呢?

将核心属性定义为输入，并使配置输入在其中传递其余的属性是配置对象。使用接口定义此配置类型。

或

我们可以将输入划分为密切相关的configOption。

这将实现封装和代码可维护性。下面的代码可以看作是一个提示。

  <app-button body="Cancel" optionConfig="opCfg" styleConfig="styCfg" (onClick)="cancelEmitter.emit()"></app-button>

或

如果适用，确定要设置为输入的核心属性，然后删除其余的属性。就像OP建议的那样，如果大多数情况下不需要这么多定制，那么就不要让每个人都有很多选项，并且有少数几个实例确实需要在一个较小的组件之上进行定制，或者构建自己的组件。