javascript - Angular - 动态生成反应形式的策略
问题描述
目前正在开发一个 Angular 项目,其中有顶级导航和子选项卡。每个选项卡路由一个不同的组件;IE 个人信息选项卡路由到个人信息组件。但是,个人信息选项卡也有侧选项卡,可以是“个人详细信息、地址等……”。每个选项卡显示一个表单,每个子选项卡包含一个表单,这些表单可以嵌套。总体而言,此应用程序可以扩展到大量表单,具体取决于有多少选项卡和子选项卡。
到目前为止,我的策略是拥有一个 JSON 配置文件,其中包含每个表单和每个字段的信息。
例子:
// personalInfo.json
[
"name": "Personal Information",
"type: "parent"
"children": [
"type": "string"
"label": "Name"
"controlName": "name",
"validations" : [...]
...
],
]
根据我所在的选项卡,我采用此配置并将其传递给 FormGroup 生成器服务,该服务使用该配置返回一个 FormGroup。获得 FormGroup 后,我将 FormGroup 和 Config 作为输入传递给另一个组件,该组件生成我向用户显示的 HTML。
HTML 生成器组件循环遍历 JSON 配置文件,并根据“类型”属性吐出一些 HTML 并附加表单控件。
问题:
我注意到一些有很多字段(20+)的表单加载到 UI 上的时间比没有很多字段的表单要长得多。这是正常的还是我的策略有缺陷?我希望我的表单易于管理,我可以更改配置中的一个属性(即“名称”)并将其反映到 UI 上,而不是查找 HTML 文件本身并对其进行更改。
解决方案
推荐阅读
- html - 从跨域加载 vtt 的问题
- c# - Xamarin.Android 膨胀自定义视图
- javascript - 为什么索引会在 javascript 数组中自动创建?
- java - 如何将“2019-04-11T05:00:54.000+01:00”转换为 dd/MM/yyyy hh:mm 格式
- java - 为什么 App Engine 部署需要 15 分钟?(以及发布/订阅的问题)
- sql - 选择 * from odk_prod._refinance_tags where (end_date like '%2017-06%' or end_date='0000-00-00') and app_no in ('APP-000-095','APP-000-115')
- colors - 透明背景的颤振卡
- sql - SSIS 包在作为作业运行时无法执行
- node.js - Azure Function(Azure Cloud) 中现在显示错误
- android - 没有得到服务器的任何响应