引入 Jquery

使用 angular-cli 新建 angular项目

1、安装 jquery

npm install jquery --save

2、.angular-cli.json 中引入 jquery.min.js

“scripts”: ["../node_modules/jquery/dist/jquery.min.js"]

3、安装 jquery的 typescript 类型声明文件

npm install @types/jquery --save

4、angluar 组件中使用 jquery 给 button 添加事件

ngOnInit(): void {
$(() => {
$('#btn_test').click(() => {
alert('test');
});
});
}

另一种方案,我猜你会更喜欢
1.下载 jquery.min.js 放到 assets/jquery下
2.引入jquery: “scripts”: [“assets/jquery/jquery.min.js”]
3.在 typings.d.ts 下新增两句

 

declare var $: any;
declare var jQuery: any;

4.这样你就可以直接使用 $ 了,当然你也可以通过这样的方式引入 bootstrap 而不是使用 npm 安装引入

其他参考: http://blog.csdn.net/mingyueyixi/article/details/73695321

Angular4.x 引入第三方 JS的更多相关文章

  1. vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)

    1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...

  2. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

  3. Angular4.0引入第三方框架,eg: bootstrap、jquery

    最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...

  4. Vue 中如何引入第三方 JS 库

    一绝对路径直接引入全局可用 二绝对路径直接引入配置后import 引入后再使用 三webpack中配置 aliasimport 引入后再使用 四webpack 中配置 plugins无需 import ...

  5. 转《vue引入第三方js库》

    一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...

  6. angular4,6 引入第三方插件的方法

    话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli ...

  7. Vue 引入第三方js.css的方式

    转自:https://blog.csdn.net/csdn_yudong/article/details/78795743 我们以 jQuery 为例,来讲解 一.绝对路径直接引入,全局可用 主入口页 ...

  8. vue 中引入第三方js库

    以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...

  9. 引入第三方js文件,报错

    错误:Mixed Content: The page at 'https://localhost:44336/MENU' was loaded over HTTPS, but requested an ...

随机推荐

  1. 【Java】【泛型】

    泛型的优点使⽤泛型有下⾯⼏个优点:1.类型安全2.向后兼容3.层次清晰4.性能较⾼,⽤GJ(泛型JAVA)编写的代码可以为java编译器和虚拟机带来更多的类型信息,这些信息对java程序做进⼀步优化提 ...

  2. Codeforces 786 B. Legacy

    题目链接:http://codeforces.com/contest/786/problem/B 典型线段树优化连边,线段树上的每一个点表示这个区间的所有点,然后边数就被优化为了至多${nlogn}$ ...

  3. MySQL学习(九)

    1 一道面试题 新建两张表 mysql> create table m -> ( -> mid int, -> hid int, -> gid int, -> mr ...

  4. java线程执行的优先级

    1.1      线程的优先级 java 中的线程优先级的范围是1-10,默认的优先级是5.10极最高. 有时间片轮循机制.“高优先级线程”被分配CPU的概率高于“低优先级线程”.根据时间片轮循调度, ...

  5. 浅谈Java简单实现的生产者与消费者问题

    一.面对生产者和消费者的问题,首先我们得明白几点: 生产者:生产数据:消费者:消费数据.消费者在没有数据可供消费的情况下,不能消费:生产者在原数据没有被消费掉的情况下,不能生产新数据.假设,数据空间只 ...

  6. Python PyQt5 Pycharm 环境搭建及配置

    PyQt5相关安装 python 版本 python 3.6.3  1.安装PyQt5 执行命令: pip install pyqt5 2.安装PyQt5-tools 执行命令:pip install ...

  7. JavaScript 第三章总结

    Getting functional function的特点 function can be reused over and over much more readable function is p ...

  8. samtools faidx输出的fai文件格式解析 | fasta转bed | fasta to bed

    fai示例: Sc0000003 2774837 10024730 60 61 Sc0000004 2768176 12845826 60 61 Sc0000005 2756750 15660150 ...

  9. English trip V1 - B 21. On a busy day 忙碌的一天 Teacher:Taylor Key: at on in

    In this lesson you will learn to tell the time.  说时间 课上内容(Lesson) at       time; at 7:30; at midday; ...

  10. LeetCode--011--盛最多水的容器(java)

    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...