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中解析JSON数据的三种方法
Jul 03 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
星际玩家的三大定律
2020/03/04 星际争霸
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python3+requests接口自动化session操作方法
2018/10/13 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
餐饮采购员岗位职责
2014/03/15 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python
vue的项目如何打包上线
2022/04/13 Vue.js
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL