Angular - 我什么时候应该使用子组件而不是传递@input

Question

我和我的团队目前正在使用 Angular (v8.x) 创建一个组件库。我们希望建立一些内部管理规则并保持我们的组件界面直观（即输入的一致命名和模式的使用）。

我们在使用@Inputs 和嵌套组件方面发现了两种思想流派。

可以使用以下（淡化）示例来描述我们的差错

示例组件 1：

<our-component [hideChild]="childHidden"></our-component>

示例组件 2：

<our-component>
  <our-child-component></our-child-component>
</our-component>

在示例 1 中，组件有一个 @Input，它显示和隐藏在模板中硬编码的子组件。

在示例 2 中，组件作为子组件添加（或不添加）（通过 ngContent）。

我试图找到一个断言，它指示何时使用一种模式而不是另一种模式。我知道可能没有。我目前的想法是，如果您的组件有 n 个子级或 n 个子级类型，请使用组件嵌套。如果组件只有一种类型的子组件，请使用输入，并将您的子组件包含在您的父组件模板中。

我查看了 Angular 风格指南，但找不到任何特定于此问题的内容。

有没有人知道任何资源或有过这种区分的经验？我想听听您是如何以及为什么以一种或另一种方式实现它的。

---

编辑：具体来说，我想要以下语句的结尾：

“在嵌套组件上使用 @Inputs ...” 和 “当...时使用嵌套组件而不是@Inputs”

---

编辑 2：感谢我可能无法正确表达自己。使用我们的组件库以及其他组件，我们正在包装现有的角材料组件，例如mat-input。我们有一个组件，它在我们的模板中包装了 mat-form-field、mat-h​​int 和 mat-input 组件。我们的组件如下所示：

<our-input
 [hideAssistiveText]="hideAssistiveText"
 [type]="inputType"
 [hint]="hint"
 [label]="label"
 [control]="control"
 ... and so on
 ></our-input>

我们不希望显示此组件的某些用例。因此，只要您提供提示字符串，our-input 就会显示our-hint 组件（嵌套在模板内）。

但我也可以像这样实现组件：

<our-input
 [hideAssistiveText]="hideAssistiveText"
 [type]="inputType"
 [label]="label"
 [control]="control"
 ... and so on
 >
   <our-hint label="{{hint}}"></our-hint>
</our-input>

开发人员可以完全省略our-hint 组件来实现相同的目标。

我所追求的是一些明确的最佳实践资源，关于何时使用一种方法而不是另一种方法（如果有的话）或您采用哪种方法的原因。

Answer 1

根据我的经验，有几种情况我会推荐示例组件 1 而不是 示例组件 2。

1. 父级将传递给子级的其他输入和输出（或者将来可能会有）。
2. 正如您在帖子中提到的，当父组件将始终具有相同的子组件并且不支持其他类型的子组件时。

示例组件 2 在父组件是通用的并且能够拥有各种子组件（或将来某个时候）的情况下会更好。

除此之外，没有硬性规定，这主要取决于个人喜好。无论哪种方式，请始终考虑将来如何扩展和使用该组件。

Answer 2

我觉得这里有两种思想流派。一是如何组织您的组件以构建您的应用程序，以及您如何管理它们的可见性切换。认为在解决这两者时应该有一个明确的分离。