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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
深入探讨前端框架react
Dec 09 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 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
Yii操作数据库的3种方法
2014/03/11 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
js模糊查询实例分享
2016/12/26 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
手机端转换rem适应
2017/04/01 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python3中str(字符串)的使用教程
2017/03/23 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python中map的基本用法示例
2018/09/10 Python
学习python的前途 python挣钱
2019/02/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
大学生个人求职信
2014/06/02 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
JavaScript流程控制(循环)
2021/12/06 Javascript