用jBox插件为例子

1,npm install jBox --save

2,找到.angular-cli.json  增加

"../node_modules/jbox/Source/jBox.min.js"

3,找到style.scss 增加

@import "../node_modules/jbox/Source/jBox.css";

4,在组件中写入

declare var $: any;

$jBox: any;
clickAlert() {
this.myModal = this.$jBox.jBox('Tooltip', {
attach: '.tooltip',
trigger: 'click'
});
this.myModal.open();
}
ngAfterViewInit() {
this.$jBox = $(this.el.nativeElement);
}

ok jBox插件就能在 angular 4 中使用了

angular 4 学习交流 QQ群 465335401

angular 4使用jquery 第三方插件库的更多相关文章

  1. vue-cli配置jquery 以及jquery第三方插件

    只使用jquery: 1.  cnpm install jquery --save 2.   cnpm install @types/jquery --save-dev (不使用ts的不需要安装此声明 ...

  2. ionic3.0--angular4.0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  3. 使用vue脚手架的项目如何引入JQuery第三方插件

    1:下载jquery npm install jquery --save 2:打开build文件夹下的webpack.base.conf.js文件: 1)在最上方 引入webpack  var web ...

  4. 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)

    display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0  隐藏,但是其依旧占用位置: height.width:0 和displa ...

  5. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

  7. jquery插件库

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  8. Angular TypeScript开发环境集成jQuery扩展插件

    集成步骤: 1.安装jquery极其扩展插件库ts定义文件 npm install jquery --save npm install --save-dev @types/jquery npm ins ...

  9. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

随机推荐

  1. 关于volatile的一些理解

    什么是volatile?什么是可见性? volatile本意是易变的,就是说它修饰的变量可能经常被修改. 可见性就是说多线程访问一个共享变量的时候,任何的修改都会让所有的线程知道并且更新. 如何实现可 ...

  2. 最简单 iText 的 PDF 生成方案(含中文解决方案)HTML 转为 PDF

    转自:http://my.oschina.net/sanji/blog/277704 最近正好项目有用到 ITEXT ,在网络上搜索了一番,发现了很多方案,但是感觉对于一般开发来说都太复杂了,本文提供 ...

  3. 开涛spring3(5.3) - Spring表达式语言 之 5.3 SpEL语法

    5.3  SpEL语法 5.3.1  基本表达式 一.字面量表达式: SpEL支持的字面量包括:字符串.数字类型(int.long.float.double).布尔类型.null类型. 类型 示例 字 ...

  4. 浏览器兼容之Chrome浏览器: -webkit-text-size-adjust: none;

    今天在看demo的时候css样式里面发现的 -webkit-text-size-adjust: none; 度娘以后,了解这段样式的作用是:解决Chrome浏览器里面,设置小于12px的字体大小问题. ...

  5. ArrayList源码解析(四)

    这篇文章主要看ArrayList的Iterator和ListIterator的实现. 1.Iterator和类Itr 当我们调用iterator方法时返回一个Iterator. /** * Retur ...

  6. 两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

  7. C#开发移动应用系列(1.环境搭建)

    前言 是时候蹭一波热度了..咳咳..我什么都没说.. 其实也是有感而发,昨天看到Jesse写的博文(是时候开始用C#快速开发移动应用了),才幡然醒悟 , 原来我们的Xamarin已经如此的成熟了... ...

  8. 织梦DEDECMS中的默认文件夹的名称怎么修改呢?

    1.首先找到系统配置文件,一般此文件会存放在Include目录下,文件名称为:common.inc.php.         2.打开common.inc.php,以修改模板目录templets为例, ...

  9. lucene全文搜索之一:lucene的主要功能和基本结构(基于lucene5.5.3)

    前言:lucene并不是像solr或elastic那样提供现成的.直接部署可用的系统,而是一套jar包,提供了一些常见语言分词.构建索引和创建搜索器等等功能的API,我们常用到的也就是分词器.索引目录 ...

  10. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...