Angular2 如何使用jquery
网上找了很多版本尝试都不行,最后在stackoverflow上找到一个,尝试完美解决
具体操作步骤如下
1. 安装jquery
npm install jquery
2.安装 type for jquery
npm install -D @types/jquery
3.在组件中使用jquery
impor * from $ from ‘jquery’
import { Component,OnInit,ElementRef } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
greeting(): void {
$("body").append("<h3>test</h3>");
}
}
前台页面
<div style="text-align:center">
<h1 id="title">
Welcome to {{title}}!
</h1>
<button (click)="greeting()">Clic Me</button>
</div>
Angular2 如何使用jquery的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- 如何在Angular2中使用jquery
首先在index.html中引入jquery文件 <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"> ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- angular2怎么使用第三方的库(jquery等)
网上找了很多教材都搜索不到该部分类型,自己测试了下写了该教程. 场景说明:项目需要使用bootstrap,众所周知bootstrap没有时间日期控件的,需要使用第三方控件,我对如何在angular2中 ...
- angular2 引入jquery
(注:以下命令都是在项目文件夹根目录下运行的,保证下载的文件都在项目的node_modules文件夹里面) 1. 运行 npm install jquery -save 后会发现在package.j ...
- angular2采用自定义指令(Directive)方式加载jquery插件
由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery ...
- angular2 学习笔记 ( 第3方插件 jQuery and ckeditor )
refer : https://forums.meteor.com/t/importing-ckeditor-using-npm/28919/2 (ckeditor) https://github ...
- angular2 + bootstrap +jquery 实例
一.Create a project process: 1.use Angular CLI to create an Angular Project "demo": need th ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
随机推荐
- Linux:xargs命令详解
xargs 给其他命令传递参数的一个过滤器,也是组合多个命令的一个工具.它擅长将标准输入数据转换成命令行参数,xargs能够处理管道或者stdin并将其转换成特定命令的命令参数.xargs也可以将单行 ...
- 实现DQN算法玩CartPole
先安装tensorflow 1.2版本和python 3.6, 接着安装: numpy-1.13.1+mkl-cp36-cp36m-win_amd64.whl 的版本,这个是windows下的,如果l ...
- 人生苦短之我用Python篇(XML模块)
XML模块 http://baike.baidu.com/link?url=-mBgvMdEDU7F05Pw7h_hBt7A0ctYiPm5a_WvKVLknydnRXKRIyydcVZWRjd_5H ...
- TCP 和 UDP 的区别( 面向连接 和 面向无连接 )
第一:TCP 和 UDP 的区别( 面向连接 和 面向无连接 ) TCP---传输控制协议,提供的是面向连接.可靠的字节流服务.当客户和服务器彼此交换数据前,必须先在双方之间建立一个TCP连接,之后才 ...
- smvc配置属性编辑器:
配置属性编辑器: 在springmvc.xml中配置: <!-- 注解驱动 --> <mvc:annotation-driven conversion-service="c ...
- Redis学习总结之二——Redis配置文件(Windows版)
# Redis configuration file example # Note on units: when memory size is needed, it is possible to sp ...
- 兼容iOs7的自定义alertView
转载请注明出处. 升级到ios7后,旧项目中使用的继承UIAlertView的自定义alertview无法正常显示了,无奈只好换思路去实现,改成从当前keywindow下创建要显示的alertview ...
- Cloudify介绍
一篇关于Cloudify的介绍,可以看一下:http://timeson.iteye.com/blog/1699730
- Jmeter用表格查看结果
Sample#:编号类似id Start Time:开始时间 Thread Name:线程名称 Label:请求名称 Sample Time:取样时间ms Status:状态 Bytes:接受字节数 ...
- threeJs中旋转位移等操作坐标系
1.场景中的立方体.圆柱等三维模型的位置属性.平移方法参照Scene对象的世界坐标系 2.场景中立方体.圆柱等的三维模型的角度属性.旋转方法参照模型自身的模型坐标系