引入 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. cookie 简单用法

    cookie 简单用法 //当前登录人的组织Id HttpCookie SingleValueCookie = new HttpCookie("DepartmentId", &qu ...

  2. poj 1744 tree 树分治

    Tree Time Limit: 1000MS   Memory Limit: 30000K       Description Give a tree with n vertices,each ed ...

  3. 网页title左边显示网页的logo图标

    打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法1: 找一个或者作一个ico文件, ...

  4. overload、override、overwrite的介绍

    答:(1)overload(重载),即函数重载: ①在同一个类中: ②函数名字相同: ③函数参数不同(类型不同.数量不同,两者满足其一即可): ④不以返回值类型不同作为函数重载的条件. (2)over ...

  5. 给大一新生学习c程序的一些建议的一些建议

    这是一篇给刚学习c程序的学弟们的一篇日志.如果想学好c程序,以及不想走太多弯路,希望能看一下这篇文章,如果说基础较好,或者说已经是大二,大三,这篇文章不会有什么帮助. 刚转到软件工程系,加了几个新生群 ...

  6. const修饰函数

    #include <iostream> using namespace std; class A { public: A(int age); void printAge() const; ...

  7. nRF52832-GPIOTE部分

    GPIOTE部分学习思维导图 GPIOTE原理 1.1nRF52832寄存器类型 Task:任务寄存器,可以由程序或事件触发 Event:事件寄存器,事件可以产生中断和触发任务 Register:普通 ...

  8. 如何模拟一个http请求并把response的内容保存下载下来,导出到excel中(结尾福利)

    def doExport(self): # 模拟一个http请求 url = u'%s?dumptype=investigation&dumpid=%s&timezone=8' % ( ...

  9. Backup and Recovery Types

    Physical(Raw) and Logical Backup: 1.Physical backups consist of raw copies of the directories and fi ...

  10. git部署

    1. 自动部署原理 先讲实现方法和原理.Git服务和仓库都是在服务器上的,服务器上的Web目录和本地都有完整的代码.Git有个叫hook的机制,可以在代码更新时执行回调(执行一段shell).一般执行 ...