积跬步,至千里
精前端,通全栈

Angular动态template模板动态创建Component

首先说明主旨意思,动态 template 模板,表示 @Component(template:动态改变这里的内容)。假设一个场景,如我未来计划开发的一个前端页面生成工具,通过json schema或者drag and drop方式动态来生成form,并且支持代码下载和复制,粘贴即可使用。

我们知道angular提供了ComponentFactoryResolver抽象类,使用方法componentFactoryResolver.resolveComponentFactory()可以动态的创建Component

从源码可以看出,方法接收参数为component: Type<T>。所以我们只需要传一个Component类就可以动态创建组件了。这满足我们很多的使用场景,但是,对于开头我说的,我需要动态的template模板,或者假设这里有一个textarea输入框,往里边粘贴一段正确的Angular html模板代码,然后可以自动动态编译模板展示对应效果。这样也是可以做到的,需要通过 Compiler 类来实现

从源码可以看出,Compiler 类中提供带有ompileModule-xxx前缀的方法是可以实现动态编译NgModule的,而第二、三个方法,可以实现编译Component。 下边我就举例使用 compileModuleAndAllComponentsSync 方法实现动态template模板动态创建Component demo

代码演示

上边代码效果在线demo演示:dynamic-template-to-compile-dynamic-component-DEMO

总结

Angular 提供 ViewContainerRefTemplateRefComponentFactoryResolver 使得我们定制渲染和动态创建组件轻松实现。然后 Compiler类的提供,使得满足一些特殊的场景。顿时感觉动态组件功能又强大的很多,官网文档对这些介绍都不多,只能自己找资料或者看源码摸索。

文章提到的 前端页面生成工具 工程为 ng-form-builder,写于本篇文章分享当天创建的工程,掐指一算,开发周期应该比较长,目前只有个人开发,也是工作不忙或者业余时间持续开发,总之会坚持到底,该工具会节约页面开发时间,去掉重复性的copy/paste工作,提供效率。

赞(1) 打赏
未经允许不得转载:前端学堂 » Angular动态template模板动态创建Component

讨论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端实战学习群 学以致用,进步更快

demo演示立即加入

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏