如何组织组件？答案

【问题标题】：How to organize components?如何组织组件？
【发布时间】：2020-03-06 19:33:10
【问题描述】：

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

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

我的模板表示是：

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

在FavouriteComponent, WishComponent、<app-product> 内部还是<app-buttons> 内部放置组件？

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

你能解释一下如何做出正确的决定吗？

【问题讨论】：

应用按钮里面有什么？
内部按钮是带有点击的按钮 HTML。
所以你总共会有 3 个按钮？ 1 个在应用程序按钮中，2 个您要添加？

标签： angular angular6 angular8

【解决方案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 中使用。您还应该使用服务来执行将产品添加到收藏夹和愿望组件从中提取的任何数据库的逻辑。

【讨论】：

你的意思是所有组件都应该放在一个 leven 相对父级中吗？但是为什么 FavouriteComponent 不在 Button 内，因为 ButtonCompnent 是初始化程序，而 FavouriteComponent 是对话框窗口，需要填写表单以保存。
很抱歉，没有更好的描述，我不明白您对应用程序的愿景是什么。 “按钮”在产品组件中，对吗？并且喜爱和愿望组件都与产品和按钮分开，对吗？在应用程序的不同部分中分开？