angularjs2中文文档（使用Angular2如何整合插件（详细教程））

本文目录

• 使用Angular2如何整合插件（详细教程）
• 在angular2中如何使用第三方js库（详细教程）
• 如何在Angular.JS中接收并下载PDF
• angular2 怎么插入js 代码

使用Angular2如何整合插件（详细教程）

本文给大家详细分析了Angular2整合其他插件的方法，有兴趣的朋友学习下。
前言：现在有很多朋友在接触Angular2的时候，总是不可避免的会使用一些其他的第3方的插件，而这些插件可能都是基于jQuery的，而且也没有对应的angular2的版本，这里我就来讲解一下，在这种情况下，如何整合第3方的jQuery插件。我们以Angular2整合zTree为例来说明整合的思路及过程。
***隐藏网址***
1.一般我在想要将像zTree这种插件集成进来的时候，我会先直接去看zTree它们的在线例子，比如说这个例子：
***隐藏网址***
效果图是这样的：
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是否成功引入：
***隐藏网址***
declare var $ : any;
import { Component, OnInit } from ’@angular/core’;declare var $ : any;
@Component({selector: ’app-demo’,templateUrl: ’./demo.component.html’,styleUrls: })export class DemoComponent implements OnInit {
constructor() { }
ngOnInit() {console.log($);}
}上面代码添加完成之后，查看浏览器的控制台输出：
***隐藏网址***
4.将zTree的js库和css库引入到项目中，在index.html文件中我们添加以下代码：
***隐藏网址***
5.zTree例子
***隐藏网址***
这里我们直接使用zTree中demo的代码直接复制到demo.component.ts文件中：
import { Component, OnInit } from ’@angular/core’;
declare var $ : any;
@Component({
selector: ’app-demo’,
templateUrl: ’./demo.component.html’,
styleUrls:
})
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的文档，当然你也可以试试别的元素，看能不能实现。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在微信中如何使用js唤起App？
***隐藏网址***
Javascript调试命令有哪些？
详细解读在nodeJs中有关文件系统与流
在Node.js中子进程有哪些应用场景
在node中有关child_process模块（详细教程）

在angular2中如何使用第三方js库（详细教程）

下面我就为大家分享一篇angular2中使用第三方js库的实例，具有很好的参考价值，希望对大家有所帮助。
本文以jquery 为例
第一种：有对应的声明文件的
1、用命令安装jQuery的声明文件。（声明文件是为了ide完美智能提示）
npm install -D @types/jquery2、引入jquery
import * as $ from ’jquery’;3、使用
$(’body’).addClass(’’);第二种：没有声明文件，自定义的js库
1、 index.html中引入 js 文件
《script src="/assets/jquery.min.js"》《/script》在ts文件中使用定义：
declare var $: any;然后就能正常使用了。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
利用nodejs爬虫使用superagent和cheerio的方法
通过在vue项目中引入noVNC远程桌面的方法步骤有哪些
通过在vue项目中使用ueditor（详细教程）

如何在Angular.JS中接收并下载PDF

介绍
jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件，服务端脚本或是浏览器脚本中使用它。
客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。
示例代码：
var doc = new jsPDF();
doc.text(20, 20, ’Hello world.’);
doc.save(’Test.pdf’);服务器端可以完美运行。
jsPDF使用方便，但是不支持中文
pdfmake支持中文，但是由于还需要引入font文件，导致文件体积可到十几M，不适合前端。
pdfmake 是基于客户端服务器的 PDF 打印解决方案，完全基于 JavaScript 开发。提供强大的排版引擎
安装：
client-version bower install pdfmake
server-version npm install pdfmake最后还是采用了后端生成PDF,前端通过接口请求，后端返回PDF Stream,最后前端通过Blob生成PDF并实现下载。
AngularJS中的解决办法
***隐藏网址***
.success(function(data){
var file = new Blob(, {type: ’application/pdf’}); // 使用Blob将PDF Stream 转换为file
var fileUrl = URL.createOjectURL(file);
window.open(fileUrl); // 在新的页面中打开PDF
})如何设置PDF的文件名
***隐藏网址***
.success(function(data){
var file = new Blob(, {type: ’application/pdf’}); // 使用Blob将PDF Stream 转换为file
var fileUrl = URL.createOjectURL(file);
var a = document.createElement(’a’);
a.href = fileURL;
a.target = ’_blank’;
a.download = ’yourfilename.pdf’;
document.body.appendChild(a);
a.click();
})遇到的问题
***隐藏网址***
兼容性问题
由于使用了HTML5 API: Bolb，所以只能支持IE10+。

angular2 怎么插入js 代码

先进入官网。官网首页就能够下载，点击箭头所示图标，下载所需文件。
点击以后弹出选择对话框，如图所示，我们可以直接点击download图标，这时下载的就只是基本文件，选择zip后我们能够将整个文件夹下载下来，这里随便自己喜欢。
下载完成以后，解压文件，开始准备写项目。如果下载的是单个文件，就不需要解压，下载的就只是angular.js文件，只需要直接饮用就可以了。
打开器，创建一个新的项目，在项目中导入我们下载的文件，再创建一个新的文档：index.html。在文档中我们需要导入Angularjs库，这里我们可以看到出现了很多其他的文件，这些文件有各自的意义，以后再说明。
先导入如图所示的这行代码，Angularjs基本库已经导入了，说明我们可以开始使用它们。