在Angular 2上添加/显示/编辑对象的一个​​组件VS 3组件？

Question

我需要让用户显示，添加，更新对象。我必须决定为Angular 2项目提供三个组件或一个组件。

选项1：一个组件

• 专业人士：轻松分享数据（DRY）。
• 缺点：巨大的模板。

选项2：拆分为3个组件

• 专业人士：以及SRP划分的小模板。
• 缺点：数据共享开销（自定义事件..）。

如何处理这种情况？我最好选择哪个选项？有没有第三种选择？

Answer 1

我只使用一个组件来触发操作，并根据您呈现编辑UI的精确程度，一个或三个组件。

按钮会发送＆＃34;模式＆＃34;属性到处理程序，如下所示：

if ( evt === 'edit' ) { do something edit-ish... }
if ( evt === 'add' ) { do something add-ish... }
if ( evt === 'delete' ) { do something delete-ish...}

等等。实际的编辑字段本身，您只需切换模板中的一些属性（例如，将输入字段的样式更改为＆＃34;可编辑＆＃34;，可能使用指令），或者如果您正在做某事详细说明，然后是可能创建一个单独的组件。

请记住，关键是另一位开发人员应该能够轻松解读它。如果＆＃34;一个组件来统治他们所有＆＃34;事情妥协，然后选择是明确的。把它分开。