引入 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. 网络通信 & 初识socket

    本节主要内容: 1.客户短\服务端架构 2.网络通信的流程 3.初识socket 一.客户端\服务端架构 客户端\服务端架构: 即Client/Server (C/S) 结构,是大家熟知的软件系统体系 ...

  2. linux运行lnmp 出现502错误

    之前遇到的问题: 安装好之后访问域名出现502错误,打开html文件正常,说明是php出现问题.在wwwlog文件夹查看nginx日志,发现报错原因是找不到/var/run/php5-fpm.sock ...

  3. _itemmod_creation_enchant

    该表控制物品产生时自动获得随机附魔效果 comment  备注  entry  物品entry  slot  附魔位置1-5,这些位置都可以用来产生自带附魔效果  groupId  附魔组Id 对就_ ...

  4. 关于Test类中不能使用Autowired注入bean的问题

    在测试类中使用AutoWired注解一直不能获取到Bean,调用方法时一直报空指针异常,我有在其他类中使用AutoWired试了下,发现能够生效.问题应该就是处在Test类中,后面找了半天终于找到问题 ...

  5. UnicodeEncodeError: 'gbk' codec can't encode character '\u25aa' in position 15: illegal multibyte sequence

    UnicodeEncodeError: 'gbk' codec can't encode character '\u25aa' in position 15: illegal multibyte se ...

  6. 如何对接oracle 建立pdb

    Oracle数据库的结构是一个数据库实例下有许多用户,每一个用户有自己的表空间,即每一个用户相当于MySQL中的一个数据库.不久前下了oracle 12c的数据库,安装之后建user时才知道oracl ...

  7. 学习笔记3—matlab中load特殊用法

    1.在matlab中 ,infro.mat中存有很多子矩阵(比如:mean_FA.mat, mean_e1.mat和 mean_e2.mat),调出某一个矩阵时,命令行为:load([path,'\' ...

  8. cocos2dx 编译遇到资源里有.svn文件不能删除报错的问题

    使用cocos compile -p android 对项目进行编译的时候,遇到res文件中包含了只读属性的svn目录,不能进行删除而报错. 错误如下图(build_android.py里面对.svn ...

  9. Python全栈开发-有趣的小程序

    进度条的打印 import sys,time for i in range(20): sys.stdout.write('$')      #stdout是标准输出的意思,在一般电脑上,stdout的 ...

  10. C# 递归缩小图片

    需求:图片太大,上传到服务器会非常占用服务器空间,而系统又不要求高清图片,于是就通过递归的方式让图片每次减少10%的大小,当图片大小小于100k的时候就保存在本地,核心代码如下: class Prog ...