时间戳

首页 > 解决方案 > Angular - 我什么时候应该使用子组件而不是传递@input

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

问题描述

我和我的团队目前正在使用 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组件来实现相同的目标。

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

标签： angularangular2-styleguide

解决方案

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

推荐阅读