Angular可重用的添加和编辑组件

时间:2017-11-16 12:57:22

标签: angular

处理添加/编辑对象的清洁解决方案是什么。

选项1

  • 添加组件
  • 编辑组件

选项2

  • 可重复使用的组件ObjectForm
  • 两个组件AddObjectEditObject。两者都重用ObjectForm
  • 可重用组件使用IsNew布尔值来检查object输入是否为空。

还有其他选项吗?

1 个答案:

答案 0 :(得分:0)

我觉得如果特别针对这个用例声明,可以避免这种情况。

对我而言,这是一种选择2:

用例1:创建一个新项目:

  • CreateItemComponent扩展ItemForm

用例2:更新项目:

  • EditItemComponent扩展ItemForm
  • EditItemComponent有@Input() item

在ItemForm中,您有CreateItemComponent和EditItemComponent共有的方法。

在每个组件中,您都有组件的特定方法。

也许,没有必要拥有旗帜isNew。对象将非常相似,第一个(创建)没有默认值,编辑的对象具有正在编辑的项目的值。

但最后,他们有相同的属性。如果您有ID,则可以在创建过程中使用UUID来模拟它。

进一步

我为表单的操作执行了另一个层。我有:

  • CreateItemComponent - > ItemActions - > ItemForm
  • EditItemComponent - > ItemActions - > ItemForm

在这里,我将操作分离(因为它们是相同的),并且我在创建和编辑组件中没有重复的代码