时间戳

首页 > 解决方案 > 如何减少 Angular 5 中的代码行数

angular - 如何减少 Angular 5 中的代码行数

问题描述

我们的 Angular 5 应用程序文件不断增长，因为我们的应用程序是具有动态组件的 SPA。我们使用布局作为主组件，并在主组件上渲染其他组件。因此大部分逻辑都落在了主组件上，主组件.ts 占据了大约 1460 行。我们已将实用程序方法移至实用程序，但仍有 1460 行。

在这里分享你的想法。

标签： angularangular5

解决方案

其中 A 是您的主要组件，您正在这样做：

A --> B

因此，组件 B 中回调处理程序的所有逻辑都在组件 A 中，为 A 搅浑水。（显然会有 C、D、E 等，其回调逻辑也在 A 中）。

你应该这样做：

A --> B --> C

这里 C 负责 C 所做的任何事情的主要逻辑， B 处理回调事件。A 保持清洁。

（您可以一起开发 B 和 C，或者 C 可以是可重用的或库组件）

这是 Angular 中公认的模式，但被新开发人员忽略了。这种模式确保关注点分离。

组件间通信通常通过全局存储解决方案（例如ngrx）或通过基于主题的服务来实现（尽管@Input @Output 模式有时也很有用）。

ngrx：https ://github.com/ngrx/platform （关于 Udemy 的精彩教程）

基于主题的服务：https ://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service （不限于父子）

这篇文章可能会有所帮助：https ://blog.angulartraining.com/component-architecture-with-angular-6f7bc9165443?__s=nrn5hrwjji1wznrbpids

此外，值得一提的是，组件的存在有以下两个原因之一：

(1) 代码组织——减少父组件的代码量/复杂度。

(2) 再利用

在这里，您需要专注于 (1) 并更好地模块化您的应用程序。

推荐阅读