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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
JS sort方法基于数组对象属性值排序
Jul 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php实现可逆加密的方法
2015/08/11 PHP
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python抓取网页内容示例分享
2014/02/24 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
python 实现逻辑回归
2020/12/30 Python
学前教育学生自荐信范文
2013/12/31 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
校庆标语集锦
2014/06/25 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
MySQL优化及索引解析
2022/03/17 MySQL