引入 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. win10 安装Oracle 11g release 2

    参考资料: Oracle Database 11g Release 2 安装详解 - WIN 10 系统 准备工作: 安装 Oracle 11g 之前,要确保在此操作系统上未安装过 Oracle,或者 ...

  2. <script src="../build/browser.min.js"></script> 是用来里面babel工具把ES6的语法转成ES5

    <!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...

  3. 创建SpringBoot项目pom.xml文件第一行报错:Non-parseable POM E:\maven\repository\org\springframework\securit

    在编辑pom.xml时,第一行有个刺眼红色×,然后在Problems看到这个问题 [ERROR] The build could not read 1 project -> [Help 1]E: ...

  4. 《剑指offer》第五十五题(平衡二叉树)

    // 面试题55(二):平衡二叉树 // 题目:输入一棵二叉树的根结点,判断该树是不是平衡二叉树.如果某二叉树中 // 任意结点的左右子树的深度相差不超过1,那么它就是一棵平衡二叉树. #includ ...

  5. 桂电第一次程序设计 C STL 排序

    Problem 1197 # 共享厕所 ediszhao添加于2017-12-22 15:00:56 时间限制 : 1000MS 内存限制 : 65536KB ×提示 : 你已解决此题目. 问题描述 ...

  6. ECharts图表的小工具

    本文介绍一个echarts工具类EChart.js,用来制作统计图表,基于echarts3. 一.工具类特性如下: 包含柱状图.折线图和饼图,可以实现这三类统计图之间的切换: 支持标题和副标题: 支持 ...

  7. audio进度条

    如上图所示:为效果图 代码如下: <!doctype html><html> <head> <meta name="author" con ...

  8. legend2---开发日志8(thinkphp和vue如何配合才能达到最优)

    legend2---开发日志8(thinkphp和vue如何配合才能达到最优) 一.总结 一句话总结:凡是php可以做的,都可以先在后端处理好数据,然后再丢给前端 凡php可以做的,都可以先在后端处理 ...

  9. pythoncook 文件和io

    1.文件不存在,则写入:文件存在则,报错 try: with open('file','x') as f: f.write() except FileExistsError: print('file ...

  10. BGP - 2,BGP报文和BGP状态

    1,BGP报文      Open:建邻居,交换version.AS号.holdtime.BGP identifier(即RouterID).可选参数长度.可选参数.      Keepalive:保 ...