用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. JDK版本会影响项目部署

    最近在公司里面部署javaweb项目的时候,项目启动的时候报错,我使用了各种方法来寻找答案,将近花了很长的时间.就在今天我终于找到了问题的根源,我开始用的是JDK1.8的版本,换了一个1.7版本的JD ...

  2. 学生成绩管理C语言版

    [标题]学生成绩管理的设计与实现 [开发语言]C语言 [概要设计]使用结构体存储学生的学号.姓名和成绩信息,实现对学生成绩类的基本操作:增加.删除.查询.排序 [测试数据]按提示输入5组正确的正确的数 ...

  3. SQL Server on Red Hat Enterprise Linux——RHEL上的SQL Server(全截图)

    本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一.   创 ...

  4. 【JAVAWEB学习笔记】01_HTML

    案例一:网站信息显示页面1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它 ...

  5. Jetty + HttpClient 处理http请求

    本人最近通过自己动手处理http请求,对http协议.Jetty以及HttpClient有了更深刻的理解,特在此与大家分享. 此图是http协议的请求格式.根据请求方法,有get和post之分.get ...

  6. 前端工程之npm

    package.json是npm package的配置文件,存储当前项目相关的信息.如果下载npm中的包,包内会自带该文件.具体有如下属性: { "name" : "un ...

  7. ActionBar 通用方法

    自定义actionBar布局:标题居中,左边有返回按键 <?xml version="1.0" encoding="utf-8"?> <Rel ...

  8. 回归-LDA与QDA

    作者:桂. 时间:2017-05-23  06:37:31 链接:http://www.cnblogs.com/xingshansi/p/6892317.html 前言 仍然是python库函数sci ...

  9. html学习笔记 - 列表

    <!-- 无序列表 --> <ul type = square> <li><a href="https://www.baidu.com"& ...

  10. Azure Event Hub 技术研究系列3-Event Hub接收事件

    上篇博文中,我们通过编程的方式介绍了如何将事件消息发送到Azure Event Hub: Azure Event Hub 技术研究系列2-发送事件到Event Hub 本篇文章中,我们继续:从Even ...