通用Angular组件,适合多种使用情况

时间:2019-05-21 15:27:02

标签: angular design-patterns primeng

我正在建立一个主要的前端项目,以使用Angular CLI进行开发。 这个前端项目将依赖大量使用Php Laravel框架开发的Rest API。这些API具有90%相同的类型,具有列出,创建,修改,删除(...)实体。

我真的希望通过使用PrimeNG之类的组件库,为我的组件开发和整个项目实施节省一些时间。 就是说,我是Angular的新开发人员,即使查看了许多文档并开始制作了原型,也不确定我是否了解所有好的做法。

我的目标是使每个Rest API都不具有角度分量。 例如,应该通过单个PrimeNg通用TurboTable组件访问所有返回列表的API,对吗?该组件当然可以根据使用环境和当前实例进行配置。 例如,我可以有一个通用组件的多个实例来显示订单列表,产品列表和(...)列表。

不是为每个实体创建一个组件,而是为产品列表创建一个组件,为订单列表创建一个组件(...)。

您怎么看?请问您有什么建议或说明对我有帮助吗?

热烈的问候, 塞巴斯蒂安

1 个答案:

答案 0 :(得分:0)

根据我的经验,我想分享一点。这就是我的亲身经历。

创建可重用组件确实是一个好习惯。强烈建议您这样做,您应该始终尝试创建可重用的组件。这肯定会帮助您重用代码并删除重复的代码。

表本身是一件非常复杂的事情,当它具有分页,排序,过滤,行选择行扩展等多种功能时, 现在,假设您在3-4个地方使用单个表组件。而且所有文件都有不同的标头,服务器端过滤器,排序,有些没有任何功能。

因此,在这种情况下,根据表Ex: product table or order table的类型,您将必须在组件初始化时动态处理标头,服务器端过滤器以及所有上述所有操作。最后,您将使用if elseswitch用例来获取表配置和标头值。并且在模板中,您将根据表类型使用*ngIf在表中显示正确的值。

此外,您还必须处理事件 @Output@Input。因此,它现在变得越来越复杂。

简而言之,如果重用组件变得非常复杂,那么我可以说您可以使用单独的组件。因为代码维护和调试也将是一个挑战。

如果您可以制作单个组件并处理所有最佳的所需方案。