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

Question

如何决定何时在父内部使用子角度组件？

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

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

让我们假设我们有里面有按钮的产品卡：

<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>

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

Answer 1

根据我对 Angular 框架的经验，这个决定并不总是像你所说的那样容易。

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

1）模块化：当我要设计的子组件在项目中出现不止一个地方时，我总是使用子组件。

2）可维护性：越简单，越容易维护。 当一个组件往往很大，并且可以识别多个子组件时，让我们拆分它。

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

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