将HTML绑定到angular中的多个.ts文件

编程问答 2022-06-09

问题描述

我目前正在开发Angular应用程序，特别是在样式和功能方面非常复杂的表。

我的组件文件当前有2k行代码，它包含用于文本样式设置，表样式设置的功能，用于检查数据是否正确的功能，数据格式设置等。 许多这些功能都是直接从HTML字段thorugh插值调用的。

有什么办法可以将这个很大的文件分成较小的文件？

解决方法

您可以将组件分解成较小的组件并将其嵌套。

典型示例：

<app-list>
  <app-list-item></app-list-item>
</app-list>

父组件然后可以将其属性传递给子组件：

<app-list>
  <app-list-item [name]="valueFromParent"></app-list-item>
</app-list>

还可以将值从子级备份回父级：

<app-list>
  <app-list-item (onChildEvent)="updateParent($event)"></app-list-item>
</app-list>

我试图在这里保持简单，但是还有更多。 我建议您仔细阅读官方Angular tutorials，因为它们很好地解释了这些概念。

您应该进一步尝试将尽可能多的功能放入Services中。这也有助于使您的组件更小，更易于推理并有助于测试。

例如functions for check if data treated are correct是服务方法的一个很好的例子。

angularangulardividefilefilefilehtmltypescripttypescripttypescript