Angular4 - 干净的代码，如何不重复代码

Question

我的问题是在角度4中编写干净代码的良好做法。

我有两个组件 - 客户端和主机，它们非常相似，都有一些<video>元素，并且两者都有类似的代码来处理这个<video>元素。

那么在不重复这两个组件的代码的情况下实现这个的最佳方法是什么？

请记住，如果我将创建另一个组件，例如视频组件，那么我将在此<video>我必须提供一些公共功能来打开，关闭相机，麦克风，开始流，关闭流等。 .. 我必须在新的Video-Component中从Client / Host-Component运行一些函数。

Answer 1

重新使用Angular中的代码是通过服务完成的。您可以通过在组件的构造函数中列出服务来注入其他组件中的服务。

Angular将查看提供程序树并为您注入服务实例。根据您是否需要单个服务或每个组件实例的单独服务实例，您可以在模块或组件中提供服务。

组件中的代码应该非常精简，并且只包含非常简单的函数和一些状态变量（尽管，甚至状态更倾向于用可观察对象代替，但这是另一个主题）。

这个模型更倾向于组合而不是继承，并且工作得更好，至少在基于原型的语言中如JavaScript（和TypeScript）。它允许您从多个服务组合功能，而不仅仅是一个基类。

Answer 2

Angular与粒度有关。您应该为您的应用创建类似“通用框架”的内容，其中包括整个应用程序的通用组件和服务。常用组件称为嵌套组件。 示例： 视频播放器，投票明星等。在规划了所有常见的嵌套组件和服务之后，您只需通过构建在Angular Dependency Injection容器中来解析它们，以便随时使用它们。 （就像@LazarLjubenović写的那样）。

第二种类型的组件是所谓的 Routable组件，当您想拥有应用程序的重要部分时，您正在使用它们。 对于示例：欢迎页面，详细信息页面等。

除此之外，首先应检查的是Angular2 style guide。您可以找到关于良好实践的非常重要的信息。