0

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

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

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

示例组件 1：

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

示例组件 2：

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

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

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

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

我检查了角度风格指南，但找不到任何特定于这个问题的东西。

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

编辑：具体来说，我想结束以下陈述：

“在...时使用@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组件来实现相同的目标。

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

4

2 回答 2

0

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

于 2020-01-28T23:55:52.880 回答
0

根据我的经验，有几种情况我会推荐Example component 1而不是Example component 2。

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

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

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

于 2020-01-29T00:04:25.433 回答