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 ...
随机推荐
- Azure 软件架构选择
1. 传统的分层结构+message broker + worker传统的层结构老生常谈了: UI 层,service,业务逻辑,数据层.就不赘述了与worker形成producer-consumer ...
- SSH项目搭建(二)
本章讲解SSH项目需要到哪些jar包,及各个jar包的作用 一.struts2 1.下载好struts2,struts2文件夹>>>>apps>>>>a ...
- 【剑指offer】求1+2+…+n,C++实现
原创博文,转载请注明出处! # 题目 # 思路 使用递归计算累加,利用逻辑与的短路特性终止递归.逻辑与的短路特性 : A&&B,A>0时,执行B:A=0时,不执行B. # 代码 ...
- 使用django搭建博客并部署
2017/8/31 18:27:59 为了以后参考的方便,在这里总结一下django搭建博客网站的主要步骤.以下大部分的内容,参考自Django中文文档 - 看云. 需要强调的是,这里使用的djang ...
- Base64编码的 换行 转义
用Base64编码的时候如果出现\n 之类的字符,java中转义. 当字符串过长(一般超过76)时会自动在中间加一个换行符,字符串最后也会加一个换行符.导致和其他模块对接时结果不一致. 解决方法:将 ...
- BZOJ4689 Find the Outlier 【高斯消元】*
BZOJ4689 Find the Outlier Description Abacus教授刚刚完成了一个制作数表的计算引擎的设计.它被设计用于同时计算一个多项式在许多点的取值.例如对于多项式 f(x ...
- sql中的一些函数(长期更新。。)
前言 在最近看别人的sql的时候,看到一些函数,比如left(),right()等等,好奇是什么意思,查询之后觉得还是挺有用的,特此记录下来.博客会在遇到新的函数的时候定期更新. 正文 1. left ...
- Windows7 下python3和python2同时 安装python3和python2
1.下载python3和python2 进入python官网,链接https://www.python.org/ 选择Downloads--->Windows,点击进入就可以看到寻找想要的pyt ...
- Epub格式的电子书——文件组成
epub格式电子书遵循IDPF推出的OCF规范,OCF规范遵循ZIP压缩技术,即epub电子书本身就是一个ZIP文件,我们将epub格式电子书的后缀.epub修改为.zip后,可以通过解压缩软件(例如 ...
- nomad 安装(单机)试用
备注: nomad 可以实现基础设施的调度管理,类似kubernetes ,但是在多云以及多平台支持上比较好, 还是hashicrop 工具出品的,很不错,同时本地测试因为使用默认的 ...