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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
js事件(Event)知识整理
Oct 11 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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 中执行系统外部命令
2006/10/09 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
JS:window.onload的使用介绍
2013/11/13 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Windows下python3.6.4安装教程
2018/07/31 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
代办出身证明书
2014/10/21 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
绵山导游词
2015/02/05 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技