如何组织组件？

Question

我有一个代表产品数据的 Product 组件。

附近的信息放置在组件 Buttons 中，带有两个按钮，允许将产品添加到收藏夹列表和愿望列表（FavouriteComponent、WishComponent）。

我的模板表示是：

<app-product>
   <app-buttons></app-buttons
</app-product>

在哪里放置组件 FavouriteComponent, WishComponent，在 <app-product> 内还是在 <app-buttons> 内？

在哪里编写按钮的处理程序？在 ButtonComponent 内部或 parent 组件的上层？

你能告诉我如何做出正确的决定吗？

Answer 1

您的模板表示看起来不对。它应该只是 <app-product></app-product> 然后在您的 App Product components html 文件中，您将拥有您想要的任何 html 以及您的 <app-buttons></app-buttons> 元素。根据您提供的描述，您可能还希望将其他组件元素也放在该文件中。就项目结构而言，听起来你应该从 app-product 组件中得到这样的东西：

AppProduct
    L AppButtons
    L FavouriteComponent
    L WishComponent

这是假设这 3 个组件将始终在 AppProduct 中使用。您还应该使用服务来执行将产品添加到 Favorite 和 Wish 组件从中提取的任何数据库的逻辑。

如何组织组件？

How to organize components?

angular

angular6

angular8