引入 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. Java基础 --Unix与Mac系统 文件路径分隔符(一)

    斜杠‘/’与反斜杠‘\’在不同系统的使用 1)Window平台使用反斜杠'\'作为文件层级分隔符:Windows使用反斜杠作为DOS命令提示符的参数标志,随着发展DOS命令符逐渐被淘汰,大部分情况下斜 ...

  2. mybatis+spring boot, mapper 提示Could not autowire. No beans of … type found

    工具及背景: IntelliJ IDEA 2016.1.3 Ultimate.spring boot, maven项目,利用mybatis 注解的方式查询mysql. 业务逻辑关系:controlle ...

  3. JS基础---到底什么是闭包?它是如何形成的?

    1.闭包 先看一个简单的例子 function a() { var i = 0; function b() { alert(++i); } return b; }var c = a(); c(); 这 ...

  4. Cannot find a valid baseurl for repo: base/7/x86_6 解决方法

    安装centos7后发现不能上网, sudo vi /etc/sysconfig/network-scripts/ifcfg-ens33 将ONBOOT=no改为ONBOOT=yes 然后重启网络服务 ...

  5. 深入JVM对象引用

    在jdk 1.2以前,创建的对象只有处在可触及(reachaable)状态下,才能被程序所以使用,垃圾回收器一旦发现无用对象,便会对其进行回收.但是,在某些情况下,我们希望有些对象不需要立刻回收或者说 ...

  6. Given d and e, factorize N to attack RSA

    题目如下: RSA算法的使用一般要求每个不同的用户有一个独立的模数N.有天,Bob脑洞大开,认为似乎没有必要这样做.只需要一个模数N,然后给不同的用户分发不同的e和d就好了.可惜这种做法有严重的安全漏 ...

  7. C++ 实现sqilte创建数据库插入、更新、查询、删除

    C/C++ Interface APIs Following are important C/C++ SQLite interface routines, which can suffice your ...

  8. css动效库animate.css和swiper.js

    animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...

  9. Asp.net core 学习笔记 ( identity server 4 JWT Part )

    更新 : id4 使用这个 DbContext 哦 dotnet ef migrations add identity-server-init --context PersistedGrantDbCo ...

  10. jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第三话):创建一个自由风格的项目(非maven),实现自动打war包

    上一节把git和ant安装在虚拟机,并在jenkins上做了相关配置,接下来就可以真正开始构建一个项目了 1.新建一个自由风格的项目,因为是用ant打包,所以不要选择构建maven项目 2.配置源码管 ...