将角度组件文件拆分为单独的文件 [英] Splitting angular component file into separate files

问题描述

我有一个角度分量:

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

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

解决方案

官方文件结构指南

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

1. 一律

<块引用>

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

2. 小文件

<块引用>

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

<小时>

如何跨文件拆分功能

1. 按照样式指南.

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

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

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

I have an angular component:

drawComponent: It has many buttons like draw rectangle, draw circle, etc. I am using paperjs which helps in actual drawing. I have some common objects which get updated. For example, I have a paperjs object which gets updated whenever I draw any shape be it circle, rectangle or any other.

My question is my drawComponent.component.tshas become too large with more than 2000 lines of code. In nodejs, I could easily split each function in a separate file, but here in angular I am not sure how to do that. Is there any way I can split my file into separate file based on the functions?

解决方案

Official file structure guidelines

You should definitely split and organize your logic into smaller files. The official Angular Style Guide recommends the following principles:

1. Rule of One

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.

2. Small files

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

---

How to split functionality across files

1. Split your app into Modules, Components, Services, Directives and Pipes as described in the Style Guide.

2. For components, directives and pipes shared across different components or modules, create a Shared Feature Module

3. For shared functionality, create Singleton Services

4. If it makes sense for your project, you can simply put some functions, classes or variables into separate files. It's all just TypeScript, you can export and import things easily.

这篇关于将角度组件文件拆分为单独的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！