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 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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
星际原理概述
2020/03/04 星际争霸
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
php生成验证码函数
2015/10/20 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
express 项目分层实践详解
2018/12/10 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
使用python Django做网页
2013/11/04 Python
Python实现的几个常用排序算法实例
2014/06/16 Python
python查询sqlite数据表的方法
2015/05/08 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
关于Python作用域自学总结
2019/06/10 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python3.9新特性详解
2020/10/10 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
策划总监岗位职责
2014/02/16 职场文书
投资合作协议书
2014/04/17 职场文书
《画家乡》教学反思
2014/04/22 职场文书
初中生期末评语大全
2014/04/24 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python