Angular二下利用pdf插件的艺术详解,Angular二整合别

作者: 韦德国际1946国际网址  发布:2019-06-01

序言:今后有大多相恋的人在接触Angular贰的时候,总是不可制止的会采用一些其余的第3方的插件,而那么些插件大概都以依赖jQuery的,而且也从没对号入座的angular2的本子,这里自身就来说课一下,在这种情景下,怎么样构成第三方的jQuery插件。我们以Angular二整合zTree为例来申明结合的笔触及进度。

Angular2整合别的插件的主意,angular二整合插件

序言:以后有非常的多相恋的人在接触Angular二的时候,总是不可制止的会使用一些其它的第壹方的插件,而那一个插件或然都以基于jQuery的,而且也未有相应的angular二的本子,这里自个儿就来说课一下,在这种情景下,如何整合第一方的jQuery插件。大家以Angular二整合zTree为例来注明结合的思路及进度。

zTree官网:

1.相似自身在想要将像zTree这种插件集成进来的时候,笔者会先直接去看zTree它们的在线例子,例如说那一个事例:

功用图是这么的:

图片 1

2.收看那一个效果之后,大家再来看这些事例的代码:关键代码在这里:

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

这段代码中应用了jQuery,对吧,那我们要集成zTree进来的话,就必须先把jQuery引进进来。那大家先不管怎么来集成zTree,我们先来消除哪些将jQuery引进进来的标题:

三.引入jQuery到angular二项目中,当然,假设您使用的插件未有注重jQuery的话能够跳过这么些手续,不过貌似第2方插件都依附它,对啊。引进jQuery的话,就相比轻松,只要在index.html文件中引进进来就足以了:

Angular二下利用pdf插件的艺术详解,Angular二整合别的插件的不二等秘书诀。<script src="node_modules/jquery/dist/jquery.min.js"></script>

引进进来现在,大家要求测试下,jQuery是或不是中标引进进来。大家使用ng g c demo命令生成二个组件来测试jQuery是还是不是中标引进:

![输入图片表明]( "在此地输入图片标题")你会看出,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($);}

}

下边代码增加完结之后,查看浏览器的操纵台出口:

![输入图片表达]( "在此处输入图片标题")会发掘输出的便是我们一向应用到的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);```翻看调控台会发掘,以下输出:![输入图片表达]( "在此处输入图片标题")在出口的内容大家得以看来,有zTree用来初叶化的init方法,那样我们就足以真正的来写三个zTree的例证了。

5.zTree例子

咱俩通过查看zTree的初阶化代码,会发掘,须要叁个参数,当中首个参数是多少个jQuery的对象,第三个参数是zTree的铺排对象,具体能够查看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中加多3个id为ztree的ul成分

<ul id="ztree"><ul>

关于何以是ul,能够看zTree的文书档案,当然你也得以推行别的成分,看能还是不可能落到实处。

到那边之后,zTree即使被大家集成进来了。效果和呼应的品种代码在此间:

前言:今后有相当的多相恋的人在接触Angular二的时候,总是不可幸免的会采取部分别样的第2方的插件,...

jQuery,让大家对dom的操作越发便捷。由于其易用性和可扩张性,jQuer也火速流行环球,各类插件也是数不完。

前言

zTree官方网站:

自己深信广大人并不能够平素隔绝jQuery去做前端,因为它太好用了,我们以前做的东西南开学多基于jQuery和它的插件。而且以往Angular贰的组件生态还不是很周到,大家在编写Angular的时候也许会想要用到jQuery。本篇小说就归纳介绍下在Angular第22中学使用jQuery

近几来因为专门的工作的由来,需求在Angualr二建的等级次序里做2个pdf显示的功力,在英特网找了个插件,但是由于是首先次使用额外插件,在用的时候遇到了一些坑,这里一时记一下利用的步子,方便现在的参阅。

一.貌似作者在想要将像zTree这种插件集成进来的时候,作者会先直接去看zTree它们的在线例子,比方说这么些例子:

倘使您不亮堂怎么搭建Angular2开辟意况,请参见那篇小说://www.jb51.net/article/94934.htm

安装

条件搭好只后先跑起来,然后大家实行上边步骤

这边供给安装八个包:pdfjs-distng2-pdf-viewer,安装时是要顺便保存到package.json里的,因此在档期的顺序根目录下输入下边发号施令:

效率图是如此的:

首先在index.html中引用jquery,仿佛大家原先做的那么

npm install pdfjs-dist --save
npm install ng2-pdf-viewer --save

图片 2

图片 3

于此同期,大家还要在system.config.js里加多投射,否则会加载不到这几个插件。大家要求增添多个地点,首先是要增添在个中的map变量下:

二.来看那几个意义之后,大家再来看那几个事例的代码:关键代码在此地:

然后我们编辑我们的app.component.ts

var map = {
 ......
 'ng2-pdf-viewer': 'node_modules/ng2-pdf-viewer',
 'pdfjs-dist': 'node_modules/pdfjs-dist'
}

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:Angular二下利用pdf插件的艺术详解,Angular二整合别

关键词: 伟德1946网页版

上一篇:JS正则表达式,JS正则表达式验证
下一篇:没有了