在Angular中使用子组件的属性？答案

【问题标题】：Property using child component in Angular?在Angular中使用子组件的属性？
【发布时间】：2020-06-18 13:48:24
【问题描述】：

如何决定何时在父组件中使用子组件？

是否应该是一个实体，例如课程列表和添加课程。

我想知道什么时候应该使用子组件，什么时候父母和孩子之间存在真正的关系？

假设我们有内部带有按钮的产品卡：

<app-product-card>
    <!-- Product information here -->
    <app-product-buttons></app-product-buttons>
</app-product-card>

app-product-buttons 按钮的打开有 clic 事件，显示购买此产品的用户列表。

我应该在里面插入<app-users-producst-buy></app-users-producst-buy>：

  <app-product-card>
        <!-- Product information here -->
        <app-product-buttons [product]="product"></app-product-buttons>
        <app-users-producst-buy></app-users-producst-buy>
    </app-product-card>

或在按钮组件中作为子组件：

  <app-product-card>
        <!-- Product information here -->
        <app-product-buttons>
               <app-users-producst-buy [product]="product"></app-users-producst-buy>
        </app-product-buttons>
    </app-product-card>

如何在这种情况下做出正确的决定？还是应该使用动态组件？

【问题讨论】：

我会说这是一个固执己见的问题，这取决于您的设置和要求。子组件是否需要与其父组件通信？它可以在其他地方重复使用吗？
不，孩子不应该只通过一种方式与父母沟通数据流，父母 -> 孩子。没有任何回调给父母。我也可以从另一个地方调用子组件。
是的，它也可以在其他地方重复使用，我只是将父数据传递给孩子
这取决于您，先生。如果不了解这些组件的实际作用，很难说，但无论您的情况如何。

标签： angular angular6 angular8

【解决方案1】：

根据我使用 Angular 框架的经验，这个决定并不像你说的那么容易。

此外，您可以应用这种规则：

1) 模块化：当我要设计的子组件会出现在项目的多个地方时，我总是使用子组件。

2) 可维护性：越简单，越可维护。当一个组件趋于庞大，你可以识别出几个子组件时，让我们拆分它。

3) DRY（不要重复自己）：考虑小型、专门的组件（当然不要过多地考虑）可能是保持小型但功能强大的代码库的关键。

我希望这些要点可以帮助您做出决定。

【讨论】：