用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. 读《Java并发编程的艺术》(一)

    离开博客园很久了,自从找到工作,到现在基本没有再写过博客了.在大学培养起来的写博客的习惯在慢慢的消失殆尽,感觉汗颜.所以现在要开始重新培养起这个习惯,定期写博客不仅是对自己学习知识的一种沉淀,更是在督 ...

  2. TreeSet源码分析

    第1部分 TreeSet介绍 TreeSet 是一个有序的集合,它的作用是提供有序的Set集合.它继承于AbstractSet抽象类,实现了NavigableSet<E>, Cloneab ...

  3. 一个小博客教你把vim用飞起来

    引言 今天我们特地来讲讲这个vim的配置. vim这东西, 很多人装逼的时候经常会提到, 不过大部分人对个vim的配置还是很陌生的, 因为 这个编辑器的学习成本还是有点高的, 但是不要紧, 今天我们就 ...

  4. 安卓TextView限定行数最大值,点击按钮显示所有内容

    问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...

  5. jsp中的request.setAttribute的使用

    1.第一个jsp页面 <form id="form1" method="post" action="first.jsp"> &l ...

  6. struts2.1.6教程十二、总结

    本教程对struts2的基本知识进行了一些说明,关于struts2的更多详细内容应参看struts2的官方文档及提供的app实例. 下面对struts2的基本执行流程作一简要说明,此流程说明可以结合官 ...

  7. Lambda应用场景和使用实例

    Java 8已经推出一段时间了,Lambda是其中最火的主题,不仅仅是因为语法的改变,更重要的是带来了函数式编程的思想.这篇文章主要聊聊Lambda的应用场景及其相关使用示例. Java为何需要Lam ...

  8. ACL配置

    标准acl 1-99:抓源地址 扩展acl 100-199:抓源地址,目标地址,具体数据包(如:icmp,tcp,udp,ospf,ip等) 实验内容 1:ACL实现禁止192.168.1.0网段所有 ...

  9. 搭建eureka服务

    1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  10. Eclipse导入项目常见问题----乱码问题03

    有时打开导入的项目文件时,会出现如下图情况: 解决方法 如下图步骤所示: 此时,我们可以看到文件正常了 jdk版本问题(有个红色感叹号)01:http://blog.csdn.net/baidu_37 ...