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 ...
随机推荐
- 《Drools7.0.0.Final规则引擎教程》第4章 4.4 LHS简介&Pattern
LHS简介 在规则文件组成章节,我们已经了解了LHS的基本使用说明.LHS是规则条件部分的统称,由0个或多个条件元素组成.前面我们已经提到,如果没有条件元素那么默认就是true. 没有条件元素,官方示 ...
- Win10 64位系统ADO方式操作数据库失败解决方法
VC操作Access数据库一般通过ODBC.ADO.DAO等方式,但在我的Win10 64位操作系统中,通过ADO方式操作数据库会失败,无法读取数据.解决方法:1.首先确保Win10操作系统ado目录 ...
- C++里的单体类实现
单件模式是设计模式中最简单的模式了. 定义: 确保一个类只有一个实例,并提供一个全局的访问点. 把一个类设计成自己管理的一个单独实例,同时避免其他类再自行生成实例(所以构造函数用protect或pri ...
- tensorflow_gpu-1.2.1-cp35-cp35m-win_amd64.whl文件怎么安装?
当你从迅雷下载之后,怎么样来安装上面的文件呢? 这也是一个问题,对于新手来说,是不知道的.其实比较简单,如下: 用命令:pip install tensorflow_gpu-1.2.1-cp35-c ...
- URL中不应出现汉字
浏览器会在跳转时,先将汉字编译成 Unicode,然后跳转,导致hash值改变两次,相当于history 中 加入了两次URL
- [Linux] ssh免密码登录
目标:本地机器ssh登录远程目标机器时不用输入密码 (默认状态下,ssh user@192.xxx.x.xxx需要输入密码) 原理:通过公钥和私钥实现系统认证 实现:把本地机器的公钥复制到目标机器 具 ...
- Git详解之六 Git工具
以下内容转载自:http://www.open-open.com/lib/view/open1328070367499.html Git 工具 现在,你已经学习了管理或者维护 Git 仓库,实现代码控 ...
- 如何让Beamer的logo放在右上角
# 位置需要导入包```\usepackage{beamerfoils}\usepackage{tikz}\usepackage{pgf}\MyLogo{%%\includegraphics[heig ...
- IIS反向代理/Rewrite/https卸载配置
目标,使IIS具有类似与Nginx的功能,将指定域名的请求重定向到IIS内.IIS外.其他机器上的其他端口,并且实现https卸载功能 重点预告: 1.安装最新版urlrewrite(微软开发的)插件 ...
- BZOJ4361 isn 【树状数组优化DP】*
BZOJ4361 isn Description 给出一个长度为n的序列A(A1,A2-AN).如果序列A不是非降的,你必须从中删去一个数,这一操作,直到A非降为止.求有多少种不同的操作方案,答案模1 ...