angular - 将 Angular 组件文件拆分为单独的文件

Question

我有一个 Angular 分量:

drawComponent:它有很多按钮，比如绘制矩形、绘制圆形等。我使用的是 paperjs，它有助于实际绘图。我有一些得到更新的常见对象。例如，我有一个 paperjs 对象，每当我绘制任何形状(无论是圆形、矩形还是任何其他形状)时它都会更新。

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

Answer 1

官方文件结构指南

您绝对应该将您的逻辑拆分并组织成更小的文件。官方Angular Style Guide建议遵循以下原则:

1. 一的规则

Apply the single responsibility principle (SRP) to all components, services, and other symbols. This helps make the app cleaner, easier to read and maintain, and more testable.

1. 小文件

Consider limiting files to 400 lines of code. Consider limiting functions to 75 lines of code

---

如何跨文件拆分功能

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

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

3. 对于共享功能，创建 Singleton Services

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