Angular2整合其他插件的方法


Posted in Javascript onJanuary 20, 2018

前言:现在有很多朋友在接触Angular2的时候,总是不可避免的会使用一些其他的第3方的插件,而这些插件可能都是基于jQuery的,而且也没有对应的angular2的版本,这里我就来讲解一下,在这种情况下,如何整合第3方的jQuery插件。我们以Angular2整合zTree为例来说明整合的思路及过程。

zTree官方网站:http://www.treejs.cn/v3/main.php#_zTreeInfo

1.一般我在想要将像zTree这种插件集成进来的时候,我会先直接去看zTree它们的在线例子,比如说这个例子:

https://github.com/zTree/zTree_v3/blob/master/demo/cn/super/metro.html

效果图是这样的:

Angular2整合其他插件的方法

2.看到这个效果之后,我们再来看这个例子的代码:关键代码在这里:

$(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 });

这段代码中使用了jQuery,对吧,那我们要集成zTree进来的话,就必须先把jQuery引入进来。那我们先不管怎么来集成zTree,我们先来解决如何将jQuery引入进来的问题:

3.引入jQuery到angular2项目中,当然,如果你使用的插件没有依赖jQuery的话可以跳过这个步骤,不过一般第3方插件都依赖它,对吧。引入jQuery的话,就比较简单,只要在index.html文件中引入进来就可以了:

<script src="node_modules/jquery/dist/jquery.min.js"></script>

引入进来之后,我们需要测试下,jQuery是否成功引入进来。我们使用ng g c demo命令生成一个组件来测试jQuery是否成功引入:

![输入图片说明](https://static.oschina.net/uploads/img/201703/26202750_1UeL.png "在这里输入图片标题")你会看到,angular-cli已经帮我们生成了必要的文件,然后我们打开demo.component.ts文件,在import语句后面添加以下内容:

declare var $ : any;
import { Component, OnInit } from '@angular/core';declare var $ : any;
@Component({selector: 'app-demo',templateUrl: './demo.component.html',styleUrls: ['./demo.component.css']})export class DemoComponent implements OnInit {
constructor() { }
ngOnInit() {console.log($);}

}

上面代码添加完成之后,查看浏览器的控制台输出:

![输入图片说明](https://static.oschina.net/uploads/img/201703/26203534_TLtD.png "在这里输入图片标题")会发现输出的就是我们平时使用到的jquery对象$。到此,我们就算成功引入jQuery到项目中了。

4.将zTree的js库和css库引入到项目中,在index.html文件中我们添加以下代码:

<link rel="stylesheet" type="text/css" href="./assets/zTree/css/metroStyle/metroStyle.css" rel="external nofollow" > <script src="./assets/zTree/js/jquery.ztree.core.min.js"></script>```这样之后,我们就可以测试zTree是否正常引入进来了,我们在demo.component.ts文件中的ngOnInit方法中添加以下代码:```console.log($.fn.zTree);```查看控制台会发现,以下输出:![输入图片说明](https://static.oschina.net/uploads/img/201703/26204017_4TLk.png "在这里输入图片标题")在输出的内容我们可以看到,有zTree用来初始化的init方法,这样我们就可以真正的来写一个zTree的例子了。

5.zTree例子

我们通过查看zTree的初始化代码,会发现,需要3个参数,其中第一个参数是一个jQuery的对象,第二个参数是zTree的配置对象,具体可以查看zTree的官方文档来看有哪些参数可以设置(http://www.treejs.cn/v3/api.php),第三个参数是用来出事zTree节点的数据。

这里我们直接使用zTree中demo的代码直接复制到demo.component.ts文件中:

import { Component, OnInit } from '@angular/core';
declare var $ : any;
@Component({
 selector: 'app-demo',
 templateUrl: './demo.component.html',
 styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
setting = {
  data: {
   simpleData: {
    enable: true
   }
  }
 };
 zNodes = [
  { id: 1, pId: 0, name: "父节点1 - 展开", open: true },
  { id: 11, pId: 1, name: "父节点11 - 折叠" },
  { id: 111, pId: 11, name: "叶子节点111" },
  { id: 112, pId: 11, name: "叶子节点112" },
  { id: 113, pId: 11, name: "叶子节点113" },
  { id: 114, pId: 11, name: "叶子节点114" },
  { id: 12, pId: 1, name: "父节点12 - 折叠" },
  { id: 121, pId: 12, name: "叶子节点121" },
  { id: 122, pId: 12, name: "叶子节点122" },
  { id: 123, pId: 12, name: "叶子节点123" },
  { id: 124, pId: 12, name: "叶子节点124" },
  { id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: true },
  { id: 2, pId: 0, name: "父节点2 - 折叠" },
  { id: 21, pId: 2, name: "父节点21 - 展开", open: true },
  { id: 211, pId: 21, name: "叶子节点211" },
  { id: 212, pId: 21, name: "叶子节点212" },
  { id: 213, pId: 21, name: "叶子节点213" },
  { id: 214, pId: 21, name: "叶子节点214" },
  { id: 22, pId: 2, name: "父节点22 - 折叠" },
  { id: 221, pId: 22, name: "叶子节点221" },
  { id: 222, pId: 22, name: "叶子节点222" },
  { id: 223, pId: 22, name: "叶子节点223" },
  { id: 224, pId: 22, name: "叶子节点224" },
  { id: 23, pId: 2, name: "父节点23 - 折叠" },
  { id: 231, pId: 23, name: "叶子节点231" },
  { id: 232, pId: 23, name: "叶子节点232" },
  { id: 233, pId: 23, name: "叶子节点233" },
  { id: 234, pId: 23, name: "叶子节点234" },
  { id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true }
 ];
 constructor() { 
 }
 ngOnInit() {
  $.fn.zTree($("#ztree"),this.setting,this.zNodes);
 }

}

看上面的代码中, $.fn.zTree($("#ztree"),this.setting,this.zNodes);这里我们用到了jQuery的id选择器,那么我们需要在模板文件demo.component.html中添加一个id为ztree的ul元素

<ul id="ztree"><ul>

至于为什么是ul,可以看zTree的文档,当然你也可以试试别的元素,看能不能实现。

到这里之后,zTree就算被我们集成进来了。效果和对应的项目代码在这里:https://git.oschina.net/zt_zhong/CodeBe

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
微信小程序聊天功能的示例代码
Jan 13 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 #Javascript
javascript数组拍平方法总结
Jan 20 #Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 #Javascript
详解Node.js模板引擎Jade入门
Jan 19 #Javascript
JS实现碰撞检测的方法分析
Jan 19 #Javascript
angular1配合gulp和bower的使用教程
Jan 19 #Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 #Javascript
You might like
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
面向对象学习之pygame坦克大战
2019/09/11 Python
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
Java基础——Map集合
2022/04/01 Java/Android