将角度分量文件拆分为单独的文件

Question

我有一个角度分量：

drawComponent ：它具有许多按钮，例如绘制矩形，绘制圆形等。我正在使用paperjs来帮助实际绘制。我有一些常见的对象，它们会更新。例如，我有一个paperjs对象，只要我绘制圆形，矩形或其他任何形状，该对象都会更新。

我的问题是我的drawComponent.component.ts在使用超过2000行代码时变得太大了。在nodejs中，我可以轻松地将每个函数拆分到一个单独的文件中，但是在这里我不确定如何做到这一点。有什么方法可以根据功能将文件拆分为单独的文件吗？

Answer 1

官方文件结构准则

您绝对应该将逻辑拆分并组织到较小的文件中。官方Angular Style Guide建议以下原则：

1. 一个规则

  

对所有组件，服务和其他符号应用单一责任原则（SRP）。这有助于使应用程序更清洁，更易于阅读和维护以及更具可测试性。

1. 小文件

  

请考虑将文件限制为400行代码。考虑将功能限制为75行代码

---

如何在文件之间拆分功能

1. 按照Style Guide中所述将您的应用拆分为模块，组件，服务，指令和管道。

2. 对于在不同组件或模块之间共享的组件，指令和管道，请创建Shared Feature Module

3. 要共享功能，请创建Singleton Services

4. 如果对您的项目有意义，则只需将一些函数，类或变量放入单独的文件中。全部都是TypeScript you can export and import things easily。

Answer 2

我建议在drawingComponent.abstract.ts中分离通用逻辑，并在扩展抽象类的不同组件（例如circle.component.ts，triangle.component.ts）中实现绘图逻辑。