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 ...
随机推荐
- three.js入门系列之旋转的圆台、球体、正方体
先来张图: 一.调整机位和辅助线 由上述代码可知,现在的机位是三维坐标轴上的点(2,2,2),方框的那一句很重要,有了这一句,你将获得上帝视角!!! 接下来添加辅助线(立体空间三轴): 这样就添加了一 ...
- iOS如何限制使用SDK的版本? 解决iOS项目的版本兼容问题
更新 2015-11-16 感谢微博好友@zyyy_000的评论,补充了为什么要在+ (void)load方法里面做Method Swizzling. 前言 最近,在做项目时,因为某种原因,突然要 ...
- ICE实现服务器客户端
本文将结合实际项目,做一个基于ice的实际项目实例应用,该实例完成客户端调用服务端接口完成消息发送,计算的功能.1,创建java项目ICEServer,导入ice.jar. 2,在项目下创建slice ...
- rabbitMQ高可用
镜像模式 镜像模式和普通模式的区别就是,队列的数据都镜像了一份到所有的节点上.这样任何一个节点失效,不会影响整个集群的使用. 在实现上,mirror queue内部有一套选举算法,会选出一个maste ...
- Android 实现两屏幕互相滑动
Android 实现两屏幕互相滑动 下文来自: http://blog.csdn.net/song_shi_chao/article/details/7081664 ----------------- ...
- CSS Div固定在网页顶部、底部、左侧、右侧
Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...
- MySQL实战 | 04 为什么要使用索引?
原文链接:MySQL实战 | 为什么要使用索引? 用过 MySQL 的应该都知道索引是干啥的吧,应该多少都设置过索引,但是若是问你索引是怎么实现的,你能说上来吗? 索引是什么? MySQL 官方对索引 ...
- CALayer2-创建新的层
本文目录 一.添加一个简单的图层 二.添加一个显示图片的图层 三.为什么CALayer中使用CGColorRef和CGImageRef这2种数据类型,而不用UIColor和UIImage? 四.UIV ...
- Linux VPS禁止某个IP访问
http://www.vpser.net/security/linux-vps-deny-ip.html
- 使用Maven运行Solr(翻译)
Solr是一个使用开源的搜索服务器,它采用Lucene Core的索引和搜索功能构建,它可以用于几乎所有的编程语言实现可扩展的搜索引擎. Solr的虽然有很多优点,建立开发环境是不是其中之一.此博客条 ...