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 ...
随机推荐
- Oracle spatial、openlayers、geoserver开发地理信息系统总结
感谢开源,使用OpenLayers+Geoserver的地理信息系统开发很简单,完全可以套用开发MIS系统的经验,我这里总结为三个步骤: 1.数据准备 2.数据发布 3.数据展现 我将按照这个思路来介 ...
- OpenLayers中的球面墨卡托投影
最近看OpenLayers,研究到地图投影时找到官方的文档,就翻译了一下,由于英文能力差,翻译不好的地方,请看原文 原文地址:http://docs.openlayers.org/library/sp ...
- 理解 Redis(2) - 手把手教你理清 Redis 安装全过程
Redis 官网 https://redis.io/ 之前学习 Redis 学了好多次, 下载安装也都按照教程或官网文档弄过, 但是对于安装过程一直有点迷糊, 感觉稀里糊涂地就好了, 就可以用了. 这 ...
- _pvp_killed_loot
该表控制玩家被击杀时掉落物品,包括角色身上装备,背包物品,银行物品 comment 备注 entry 掉落的物品ID lootCount 掉落的物品数量 chance 掉落的几率,例如50,则50%几 ...
- 【ATcoder】D - Half Reflector
题目链接:http://agc011.contest.atcoder.jp/tasks/agc011_d 每次都是两道题惨啊.... 想了想大概做法,既然小球走过去就会导致装置变化?那么是不是有一点像 ...
- python (协程)生产者,消费者
#coding=utf- import gevent from gevent.queue import Queue, Empty import time tasks = Queue(maxsize=) ...
- 牛客网NOIP赛前集训营-提高组(第一场)A 中位数
中位数 思路: 二分答案 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #include< ...
- Asp.net core 学习笔记 ( HttpClient )
2018-09-18 core 2.1 之后有新的方案咯 http://www.talkingdotnet.com/3-ways-to-use-httpclientfactory-in-asp-net ...
- (转)c#中const与readonly区别
const 的概念就是一个包含不能修改的值的变量.常数表达式是在编译时可被完全计算的表达式.因此不能从一个变量中提取的值来初始化常量.如果 const int a = b+1;b是一个变量,显然不能再 ...
- Docker入门(CentOS7)
1.docker安装yum -y install bash-completion #tab键补齐包yum install net-tools -yyum -y install wgetwget ...