Angular4.x 引入第三方 JS
引入 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的更多相关文章
- vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)
1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...
- Angular4.0引入laydate.js日期插件方法
Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...
- Angular4.0引入第三方框架,eg: bootstrap、jquery
最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...
- Vue 中如何引入第三方 JS 库
一绝对路径直接引入全局可用 二绝对路径直接引入配置后import 引入后再使用 三webpack中配置 aliasimport 引入后再使用 四webpack 中配置 plugins无需 import ...
- 转《vue引入第三方js库》
一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...
- angular4,6 引入第三方插件的方法
话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli ...
- Vue 引入第三方js.css的方式
转自:https://blog.csdn.net/csdn_yudong/article/details/78795743 我们以 jQuery 为例,来讲解 一.绝对路径直接引入,全局可用 主入口页 ...
- vue 中引入第三方js库
以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...
- 引入第三方js文件,报错
错误:Mixed Content: The page at 'https://localhost:44336/MENU' was loaded over HTTPS, but requested an ...
随机推荐
- springmvc通过ajax异步请求返回json格式数据
jsp 首先创建index.jsp页面 <script type="text/javascript"> $(function () { $("#usernam ...
- Codeforces 746 G. New Roads
题目链接:http://codeforces.com/contest/746/problem/G mamaya,不知道YY了一个什么做法就这样过去了啊 2333 首先我显然可以随便构造出一棵树满足他所 ...
- C#:MVC打印PDF文件
在百度上找了许多PDF文件打印,但是符合我需求的打印方式还没看到,所以根据看了https://www.cnblogs.com/TiestoRay/p/3380717.html的范例后,研究了一下,做出 ...
- java用毫秒数做日期计算的一个踩坑记录
错误示例: Date today = new Date(); Date nextMonth = new Date(today.getTime() + 30* 1000*60*60*24); print ...
- JavaSE习题 第七章 常用实用类
问答题 1.怎样实例化一个Calendar对象? Calendar ca=Calendar.getInstance(); 2.Calendar对象调用set(1949,9,1)设置的年月日分别是多少? ...
- php CLI SAPI 内置Web Server
PHP 5.4.0起, CLI SAPI 提供了一个内置的Web服务器. 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作目录(Working ...
- jq ‘’操作‘’伪元素
1. 伪元素非 dom 元素,jq无法操作,但可以间接影响. 2. 操作方式 2.1 修改类 <!DOCTYPE html> <html lang="en"> ...
- Unity中角度与弧度之间的相互转换
弧度数 = 角度数 * Mathf.Deg2Rad角度数 = 弧度数 * Mathf.Rad2Deg
- 记录python接口自动化测试--把测试结果写进excel文件(第九目)
python中一般使用xlrd(excel read)来读取Excel文件,使用xlwt(excel write)来生成Excel文件(可以控制Excel中单元格的格式),需要注意的是,用xlrd读取 ...
- javaweb课程信息管理系统
1.DBUtil包连接数据库 2.Bin包设计成员函数及方法 3.Dao包设计sql语句 4.servlet包增删改查方法 5.service连接servlet 6.设计jsp增删改查页面 7.连接各 ...