用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. CATransition 转场动画解析

    http://blog.csdn.net/mad2man/article/details/17260901

  2. <javaScript> 数组去重的方法总结(2017年)

    现在要求去重下面这个数组: const arr = [1, 2, 3, 3, 3, '0', '1', '2', '测试', '重复', '重复', NaN, NaN, false, false]; ...

  3. Nginx安装lua支持

    Nginx安装lua支持 需要LuaJIT-2.0.4.tar.gz,ngx_devel_kit,lua-nginx-module 1.下载安装LuaJIT-2.0.4.tar.gz wget -c ...

  4. 为什么非全站升级HTTPS不可?

    升级HTTPS已经是大势所趋,但仍有大量互联网企业犹豫是否要全站升级HTTPS,为此本文梳理了全站升级HTTPS与部分升级HTTPS的优劣势对比,来判断是否真的有必要进行全站HTTPS升级. HTTP ...

  5. php.ini 文件中配置的意义注释

    ;;;;;;;;;;;;;;;;;;;; About php.ini   ;  //关于php;;;;;;;;;;;;;;;;;;;; PHP's initialization file, gener ...

  6. zabbix监控Elasticsearch集群

    本节以 zabbix 为例,介绍如何使用监控系统完成 Elasticsearch 的监控报警. github 上有好几个版本的 ESZabbix 仓库,都源自 Elastic 公司员工 unterge ...

  7. springboot 获取hibernate 的 SessionFactory

    注入bean package cn.xiaojf; import cn.xiaojf.today.data.rdb.repository.RdbCommonRepositoryImpl; import ...

  8. python学习第三个坑

    ##########################python 第三章 ################################这一章呢,主要是文件的操作,还有涉及到函数的一部分. PS:整 ...

  9. 【WPF】用三角形网格构建三维图形

    虽然WPF只能支持部分三维模型,不过从应用功能开发的角度看,也已经够用了(非游戏开发).WPF 的三维图形,说得简单一点,也就两种而已. 1.把二维对象放到三维空间中,这个应该较为好办,像 Image ...

  10. android 定时器(Handler Timer Thread AlarmManager CountDownTimer)

    Android实现定时任务一般会使用以上(Handler Timer Thread AlarmManager CountDownTimer)五种方式.当然还有很多组合使用(比如Handler+Thre ...