angular动态表单制作

 更新时间:2018年02月23日 14:10:55   作者:野生爬山虎  
通过实例代码给大家详细讲述了angular动态表单的制作方法,对此有需要的朋友参考下。

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

动态表单使用场景

有时候我们需要一个灵活的表单,这个表单可以根据用户的选择,或者服务器返回的信息进行重新配置,比如:增加或删除一组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)

实现动态表单

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

具体思路

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

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

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

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

下图是实现思路:

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

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

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

<form>
 <ng-container *ngFor="let config of configs" [自定义指令] >
 </ng-container>
</form>

configs是用户的配置数据,自定义指令寄宿在ng-container中,根据config渲染出各自的动态组件,而ng-container是透明的。

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

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

相关文章

  • AngularJS入门教程(二):AngularJS模板

    AngularJS入门教程(二):AngularJS模板

    这篇文章主要介绍了AngularJS入门教程(二):AngularJS模板,本文是系列文章的第三篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下
    2014-12-12
  • 浅谈AngularJS中$http服务的简单用法

    浅谈AngularJS中$http服务的简单用法

    这篇文章主要介绍了浅谈AngularJS中$http服务的简单用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 总结十个Angular.js由浅入深的面试问题

    总结十个Angular.js由浅入深的面试问题

    这篇文章虽然只有10个问题,但是覆盖了angular开发中的各个方面,有基本的知识点,也有在开发过程中遇见的问题,同时也有较为开放性的问题去辨别面试者的基础水准和项目经验,注意答案仅供参考哦~
    2016-08-08
  • 浅谈Angular6的服务和依赖注入

    浅谈Angular6的服务和依赖注入

    这篇文章主要介绍了浅谈Angular6的服务和依赖注入,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 使用ng-packagr打包Angular的方法示例

    使用ng-packagr打包Angular的方法示例

    这篇文章主要介绍了使用ng-packagr打包Angular的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • AngularJS国际化详解及示例代码

    AngularJS国际化详解及示例代码

    本文主要介绍AngularJS国际化的知识,这里整理了相关资料和示例代码以及实现效果图,有兴趣的小伙伴可以参考下
    2016-08-08
  • AngularJS 避繁就简的路由

    AngularJS 避繁就简的路由

    这篇文章主要为大家详细介绍了AngularJS 避繁就简的路由的相关资料,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Angular.JS中指令ng-if的注意事项小结

    Angular.JS中指令ng-if的注意事项小结

    这篇文章主要给大家分享了关于Angular.JS中指令ng-if的一点注意事项,分享出来供大家参考学习,文中介绍的还是相对来说比较详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 对angular 实时更新模板视图的方法$apply详解

    对angular 实时更新模板视图的方法$apply详解

    今天小编就为大家分享一篇对angular 实时更新模板视图的方法$apply详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • div实现自适应高度的textarea实现angular双向绑定

    div实现自适应高度的textarea实现angular双向绑定

    本文主要介绍了div实现自适应高度的textarea,实现angular双向绑定的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论