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写的放大镜效果
Aug 22 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
JavaScript实现星级评分
Jan 12 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
详解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
PHP5 安装方法
2007/01/15 PHP
php抓取https的内容的代码
2010/04/06 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP asXML()函数讲解
2019/02/03 PHP
js控制CSS样式属性语法对照表
2012/12/11 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
对python3新增的byte类型详解
2018/12/04 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python 日志 logging模块详细解析
2020/03/31 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
语文课外活动总结
2014/08/27 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
教学反思怎么写
2016/02/24 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android