angular动态表单制作


Posted in Javascript onFebruary 23, 2018

源码:https://github.com/Karin001/ngx-dynamic-form

angular动态表单制作

动态表单使用场景

有时候我们需要一个灵活的表单,这个表单可以根据用户的选择,或者服务器返回的信息进行重新配置,比如:增加或删除一组input元素、一组select元素,等等。

在这样的情况下,如果一开始就在模板里写下所有的表单,利用一个ngif树状结构进行选择控制,程序会变得比较冗余。

这时。程序最好是能够根据用户的选择(driven by configuration)或者服务器的响应,自动生成所需要的表单。这就是动态表单要处理的业务。

组件生成的相关概念组件的两个构成

要动态生成表单,需要先理解组件是如何生成的。

一个angular组件由两部分所组成。

Wrapper

Wrapper能够与组件进行交互,当一个Wrapper初始化完成后,就已经帮我们实例化了一个组件。同时,它也负责组件的change detection,以及触发钩子函数比如ngOnInit,ngOnChanges。

View

View负责呈现渲染过后的模板,将组件的外貌展示出来,并且能够触发Wrapper的change detection。一个组件可以有多个view,每一个view可以通过调用angular提供的两个函数自行生成和销毁,这个过程不用顶层的视图参与。

组件的通常加载方式(非动态加载方式)

通常情况下,我们都是把组件内嵌到根组件或者另一个组件当中使用。嵌入的组件称为子组件,被嵌入的称为父组件。这时,当我们的子组件代码在被编译时,会生成一个组件工厂component factory(这是angular核心类ComponentFactory的一个实例),和一个hsot view,host view负责本组件在父组件视图内生成该组件的dom节点,以及生成该组件的wrapper和view。

动态加载组件

而当我们想要将一个动态组件插入某个组件视图时,则无法取得这个动态组件的实例,因为这些是非动态组件编译器做的事。

实现动态组件

angular提供了一些函数解决上面的难题,要使用这些函数我们需要注入两个对象。

constructor(
 private componentFactoryResolver: ComponentFactoryResolver,
 private viewcontainerRef: ViewContainerRef,
 ) {
  
 }

我们注入了ComponentFactoryResolver,和ViewContainerRef。

ComponentFactoryResolver上提供了一个方法(resolveComponentFactory()),该方法接收一个组件类作为参数,生成一个基于该组件类的组件工厂,也就是我们之前提到的那个组件工厂。

ViewContainerRef提供了一个方法(createComponent()),该方法接收组件工厂作为参数,在该视图中生成子组件。(我个人的理解是它处理了host view所做的事,为组件生成了wrapper和view)

实现动态表单

上文简要的介绍了实现动态组件的一些技术,现在开始思考如何做一个动态表单。

具体思路

我们想要做出一个独立的动态表单模块,当我们想要使用动态表单时,只需简单引入这个模块,稍加配置即可使用。

我们希望这个模块做好了后,在顶层使用者的角度会是这样一个工作流程:

angular动态表单制作

我们可以很容易的做出一个具有输入属性的组件,问题的核心在于这个组件是如何根据输入属性生成我们想要的表单。

也就是说,是它自己调用ComponentFactoryResolver和ViewContainerRef进行组件的动态生成,还是交给别人处理。

下图是实现思路:

angular动态表单制作

实际上我们把动态表单拆分成了一个个小的动态组件(不预先加载),由外层的一个组件充当一个容器,所有的动态组件都会在里面进行生成和销毁,他们共同组成了一个动态表单。调用ComponentFactoryResolver和ViewContainerRef生成组件的的这部分逻辑没有集成在外层容器中,而是交给了一个自定义的指令和ng-container。因为指令没有视图,他通过注入ViewContainerRef获取到的是宿主的视图容器。由于ng-container不会被渲染,所以获取到的视图容器就是外层组件容器的视图容器。

这么处理的好处就是不需要由外层组件统一对各个拆分的动态组件进行管理,相当于是由动态组件自己进行管理。

外层组件容器大概会是下面这样:

<form>
 <ng-container *ngFor="let config of configs" [自定义指令] >
 </ng-container>
</form>
configs是用户的配置数据,自定义指令寄宿在ng-container中,根据config渲染出各自的动态组件,而ng-container是透明的。

看一下代码目录结构,最后会是这个样子

angular动态表单制作

以上就是大体的实现思路了,具体还有许多细节可以关注文章开头提到的那两篇文章,讲的很详细。

Javascript 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
清空上传控件input file的值
Jul 03 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
You might like
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
json简单介绍
2008/06/10 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python变量命名的7条建议
2019/07/04 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python实现手势识别
2020/10/21 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
预备党员表决心书
2014/03/11 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL