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

Question

我有一个角度组件：

drawComponent：它有很多按钮，如绘制矩形、绘制圆形等。我使用的是 paperjs，它有助于实际绘制。我有一些更新的常见对象。例如，我有一个 paperjs 对象，每当我绘制任何形状（圆形、矩形或任何其他形状）时，该对象都会更新。

我的问题是我drawComponent.component.ts的代码太大了，超过 2000 行。在 nodejs 中，我可以轻松地将每个函数拆分到一个单独的文件中，但是在 angular 中我不知道该怎么做。有什么办法可以根据功能将我的文件拆分成单独的文件吗？

Answer 1

官方文件结构指南

您绝对应该将逻辑拆分并组织成更小的文件。官方的Angular Style Guide推荐了以下原则：

1. 一法则

将单一职责原则 (SRP) 应用于所有组件、服务和其他符号。这有助于使应用程序更简洁、更易于阅读和维护，并且更易于测试。

2. 小文件

考虑将文件限制为 400 行代码。考虑将函数限制为 75 行代码

如何跨文件拆分功能

1. 如样式指南中所述，将您的应用程序拆分为模块、组件、服务、指令和管道。

2. 对于跨不同组件或模块共享的组件、指令和管道，创建一个共享功能模块

3. 对于共享功能，创建单例服务

4. 如果它对您的项目有意义，您可以简单地将一些函数、类或变量放入单独的文件中。这一切都只是 TypeScript，您可以轻松导出和导入内容。