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 相关文章推荐
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
js时间控件只显示年月
Jan 08 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
js实现随机点名小功能
Aug 17 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue 子组件和父组件传值的示例
Sep 11 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连接Oracle for NT 远程数据库
2006/10/09 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
10 个经典PHP函数
2013/10/17 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
基于vuex实现购物车功能
2021/01/10 Vue.js
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python在非root权限下的安装方法
2018/01/23 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
selenium自动化测试入门实战
2020/12/21 Python
python自动化发送邮件实例讲解
2021/01/04 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
职称自我鉴定
2013/10/15 职场文书
运动会跳远加油稿
2014/02/20 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
中学语文教学反思
2016/02/16 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Python读取文件夹下的所有文件实例代码
2021/04/02 Python