用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. VMTools安装

    先启动CentOS并成功登陆如下图,发现底部提示,准备安装 2.选择虚拟机菜单栏--安装VMware tools 3.光驱目录中拷贝VMwareTools-10.0.5-3228253.tar.gz到 ...

  2. MySQL的SELECT ...for update

    最近的项目中,因为涉及到Mysql数据中乐观锁和悲观锁的使用,所以结合项目和网上的知识点对乐观锁和悲观锁的知识进行总结. 悲观锁介绍 悲观锁是对数据被的修改持悲观态度(认为数据在被修改的时候一定会存在 ...

  3. iOS开发,UITableView相关问题

    第一条:UITableViewCell 内容的设置 //文本放到最后 NSIndexPath *indexPath = [NSIndexPath indexPathForRow:_dataArr.co ...

  4. 为什么字符串会有length属性-JS中包装对象

    任何原始类型的数据  (primitive type) 比如 String类型的字符串 "abcd"   "abcd"  是原始类型的数据 但是 当他调用 le ...

  5. springcloud(六):配置中心(一)

    随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的更新和重启,运维苦不堪言也容易出错.配置 ...

  6. 分布式版本控制git常见问题之gitignore冲突(精简版)

    上次写的的太模糊了,现在简单直接写出个人心得,如下: 原因是有人提交了.gitignore里面的内容,所以和本地的不一样,这样就有问题,那么pull都不可以,所以要这样: git update-ind ...

  7. Coursera 机器学习笔记(五)

    主要第七周的内容:支持向量机 可以参考JerryLeed 的支持向量机SVM系列博客http://www.cnblogs.com/jerrylead 以及 pluskid的支持向量机系列博客http: ...

  8. NLTK学习笔记(三):NLTK的一些工具

    主要总结一下简单的工具:条件频率分布.正则表达式.词干提取器和归并器. 条件分布频率 <自然语言学习>很多地方都用到了条件分布频率,nltk提供了两种常用的接口:FreqDist 和 Co ...

  9. ssh别名登录密钥登录

    在centos上使用别名和是用密钥登录: vim /root/.ssh/config  #输入下列内容 Host * User root   #以root登录 ServerAliveInterval ...

  10. JavaScript中的string对象及方法

    string对象 string对象的两种创建 var a="hello"; var b=new String("hello"); //下面是方法 //charA ...