如何在角度组件之间共享功能？答案

【问题标题】：How to share functions between components in angular?如何在角度组件之间共享功能？
【发布时间】：2018-05-29 17:31:47
【问题描述】：

我有 3 种类型的组件来处理表单。它们是：

EntityFormEditComponent //To Edit
EntityFormViewComponent // To Visualize
EntityFormCreateComponent // To Create

它们有一个共同的父对象，即EntityFormComponent，它们之间共享基本逻辑。

当我创建一个新实体时，该实体从基本表单组件扩展而来，如下所示：

UserFormEditComponent extends from EntityFormEditComponent
UserFormViewComponent extends from EntityFormViewComponent
UserFormCreateComponent extends from EntityFormCreateComponent

这种组织我的项目的方式会产生一个问题：

如何在这 3 个组件之间共享常用方法？

我认为该服务是一种解决方案，但不推荐使用，因为它们不用于处理组件逻辑。

【问题讨论】：

请说得更准确一些，告诉我们您所说的“常用方法”到底是什么意思。
如果他们都共享一个评论父 EntityFormComponent，你能把你的共同逻辑放在那里并使用继承吗？
@DiabolicWords 常用函数如 save()，可以在 UserFormEditComponent 和 UserFormCreateComponent 之间共享
通常情况下，save 函数属于服务，服务会从组件中调用
我同意 user184994。使用 Angular 和 Typescript，你应该避免复杂的继承模式。我认为您来自 Java 背景，这很正常。好吧，在 Angular 的世界里，当我们谈论组件、模块和服务时，你必须重新考虑你对通用解决方案的方法。 -- 简单来说：如果你有一个要在多个组件之间共享的方法，请使用服务而不是应用继承模式。

标签： angular

【解决方案1】：

我认为该服务是一种解决方案，但不推荐因为它们不用于处理组件逻辑。？

Angular 将组件与服务区分开来，以增加模块化和可重用性。 and It's Good Practice to Delegate complex component logic to services

来自 Angular 样式指南
将组件中的逻辑限制为仅视图所需的。所有其他逻辑应委托给服务。

将可重用逻辑移至服务并保持组件简单和专注于他们的预期目的。

为什么？逻辑可以被多个组件重用时放置在一个服务并通过函数公开。

为什么？服务中的逻辑可以更容易地在单元测试中隔离，而组件中的调用逻辑很容易被mock。

为什么？从组件。

为什么？使组件保持苗条、修剪和集中。

在 Angular 中使用服务还可以确保您没有违反 DRY 和 SRP 软件开发原则，对于您的场景，最好的解决方案是使用服务

奖励：what, why and when to use services?

【讨论】：

您好，如果此答案解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。
这是一个非常好的答案，它突出了 Angular 如此受欢迎的原因，但它隐藏了重构有时在大型项目中的难度！ ;) - 如果您正在制作一个新组件 - 请按照此操作，然后您可以看到可以重用您的服务的其他区域。我花了很长时间，从其他人那里得到了很多建议。