Angular 4根据组件名称动态创建出组件的方法教程


Posted in Javascript onNovember 01, 2017

一、理解angular组件

组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构,这样他能简单地写app,通过类似的web Component 或者angular2的样式。web Component 是一个规范。马上就要成为标准。

应用组件的优点:

  • 比普通指令配置还简单
  • 提供更好的默认设置和最好的实践
  • 对基于组建的应用架构更优化。
  • 对angular2的升级更平滑。

不用组建的情况:

  • 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段。
  • 如果你想定义指令的 priority,terminal,multi-element,也不能用。
  • 组件只能通过元素标签触发,其他的只能用命令。

二、动态创建组件

  • 说说场景先,比我写了一些组件,这此组件内容都很少,弹出的对话框也许只有一行数据,也有可能是一个表单等,或都一些多选的,单选的选项等。
  • 网上有好多,动态创建组件的Demo,都不是很满意,愿意就是要动态创建组件的时候,传入的你即将要创建的组件对象进去,然后把这个放到页面里显示出来。这算什么动态创建呀,我就想传一个组件的名字,然后就能把他创建出来。
  • 之前写过C#动态创建类,都是给一个类的名称,然后通过反射将类创建出来,然后能过接口过滤转成接口调用方法或, invoke 某个方法等进行操作。像这种才是我想要的效果。
  • 给个名称,然后就把这个组件创建出来,通过输入一些参数对创建出来的组件进行赋值,输出一些参数(主就输出是事件了,比较点击组件上的按钮触发相应的事件等)。

说了这么多,先来个例子吧。

Angular 4根据组件名称动态创建出组件的方法教程

上面那张图很简单就是一个输入文本的一个弹框。

下面这个就有点复杂了,有数据传入,事件绑定等

Angular 4根据组件名称动态创建出组件的方法教程

主了调用起来方便,我把这些都封装成了一个方法:三个参数

  • 要创建的组件名称
  • 要传入组件的参数
  • 组件输出的事件
Utility.$ShowDialogComponent('ComponentName', {
  Params1,Params2...
 }, {
  onEventName1:()=>{},
  ...
 });

由于我动态创建的组件都是以弹框形式出来,所以我把动态创建的步骤放到了,弹框组件里。

创建Dialog.ts,文件,

@Component({
 selector: 'xtn-mode-dialog',
 templateUrl: './Dialog.html',
 styleUrls: ['./Dialog.scss'],
 animations: [ // 弹框的添加一个动画效果,由小到大显示,关闭时候,由大小到最后不见了。
 trigger('TriggerState', [
  state('inactive', style({ transform: 'scale(0.1)' })),
  state('active', style({ transform: 'scale(1)' })),
  transition('inactive => active', animate('150ms ease-in')),
  transition('active => inactive', animate('150ms ease-out')),
 ])
 ]
})
export class XtnDialog implements OnInit, OnDestroy, OnChanges, AfterContentChecked, AfterContentInit {
 // 依赖注入动态创建组件的工厂类
 constructor(private resolver: ComponentFactoryResolver) {
 }
 // 内容检查,主要是判断是打开还是关闭弹框。
 ngAfterContentChecked(): void {}
 // 销毁操作
 ngOnDestroy(): void {}
 // 这里就是动态创建的组件地方法
 LoadComponent(self:any){}
 ngAfterContentInit(): void {}
 ....
}

就不把代码张贴里了,查看全部代码可以点击这里展示出几个方法吧,具体详情可能点击

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
javascript头像上传代码实例
Sep 28 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
js前端导出Excel的方法
Nov 01 #Javascript
JS二分查找算法详解
Nov 01 #Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 #Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 #Javascript
bootstrap Table的一些小操作
Nov 01 #Javascript
react-native fetch的具体使用方法
Nov 01 #Javascript
Vue异步加载about组件
Oct 31 #Javascript
You might like
PHP两种快速排序算法实例
2015/02/15 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
javascript常见操作汇总
2014/09/03 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
超市总经理岗位职责
2014/02/02 职场文书
开学典礼决心书
2014/03/11 职场文书
伊索寓言教学反思
2014/05/01 职场文书
诚信承诺书模板
2014/05/26 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python