引入 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. JaveWeb 公司项目(4)----- Easyui的表单验证

    前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所 ...

  2. SqlServer中常常搞不清楚 sp_columns来看一看

    The sp_columns catalog stored procedure is equivalent to SQLColumns in ODBC. The results returned ar ...

  3. SqlParameter的两种用法【二】

    private void Loadprovince() { string sql = "select * from Tables where ArealdPid=@pid"; /第 ...

  4. VC.时间_ZC测试代码

    1. #include <windows.h> #include <stdio.h> void TimeNowZ( char* _pc ) { SYSTEMTIME sys; ...

  5. VC.时间(网页内容收集)

    1.VC++获得当前系统时间的几种方案_记忆53秒_新浪博客.html(http://blog.sina.com.cn/s/blog_676271a60101i0hb.html) 1.1.内容保存: ...

  6. VS2010.STL::list的一个bug

    1.ParameterAnswer_Parse(...) 下 FlistParameterOffset.clear(); 出错(list<DWORD>.clear()) (https:// ...

  7. Linux下计划任务以及crontab权限问题

    在Linux工作环境下,我们有时可能会需要在未来某个时间执行某个命令或脚本,但是我们又不可能定个闹钟,然后到点了再去执行吧,这多麻烦.还好我们的Linux系统这么强大,提供了任务计划这个功能,我们就不 ...

  8. 第 6 章 存储 - 044 - volume 生命周期管理

    volume 生命周期管理 1)备份 因为 volume 实际上是 host 文件系统中的目录和文件,所以 volume 的备份实际上是对文件系统的备份 例如:本地的Registry,所有镜像都存在/ ...

  9. pointer-events

    在做移动端的页面时,经常会遇到点击(touch)一个弹出的层,在上面触发点击(touch)事件,当弹出层关闭之后点击(touch)事件会穿透到下面的层,这时候如果下一层的某个元素也绑定了点击(touc ...

  10. Genome-wide gene-environment analyses of depression and reported lifetime traumatic experiences in UK Biobank

    Genome-wide gene-environment analyses of depression and reported lifetime traumatic experiences in U ...