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 ...
随机推荐
- (转)MapReduce Design Patterns(chapter 4 (part 1))(七)
Chapter 4. Data Organization Patterns 与前面章节的过滤器相比,本章是关于数据重组.个别记录的价值通常靠分区,分片,排序成倍增加.特别是在分布式系统中,因为这能提高 ...
- C#中正则表达式编程(未完,待补充)
对于只存储一个匹配,可用Match类: 一般模式: Regex reg = new Regex(string pattern); string str = "###############& ...
- iOS开发CocoaPods使用
一.为什么用CocoaPods iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三 ...
- learn go return fuction
package main // 参考文章: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/06.9.md im ...
- Win7 使用密码共享磁盘连接总是提示输入密码
Win7 使用密码共享磁盘连接总是提示输入密码,只要设置下面这里就可以了.默认是保持来宾身份.
- 考研系列 HDU2241之早起看书 三分
考研并不是说说就可以了,要付诸于行动. 对于Lele来说,最痛苦的事莫过于早起看书了,不过为了考研,也就豁出去了.由于早起看书会对看书效率产生影响,所以对于要什么时候起床看书,还是有必要考虑的. 经过 ...
- linux自学(二)之centos7镜像安装
上一篇:linux自学(一)之vmware虚拟机安装 虚拟机安装完成之后,就可以安装centos镜像了 centos官网:https://www.centos.org/ centos7镜像 由于我的电 ...
- Promise详解
前言 && 基础概念 Promise 是解决 JS 异步的一种方案,相比传统的回调函数,Promise 能解决多个回调严重嵌套的问题. Promise 对象代表一个异步操作,有三种状态 ...
- 好用的 convert freestyle jenkins jobs to pipeline 插件使用
1. 安装 安装,重启即可,非常简单 2. 使用 原有配置,主要列出执行 生成的jenkins pipeline 3. 构建效果 4. 参考资料 https:// ...
- 40+个对初学者非常有用的PHP技巧
1.不要使用相对路径,要定义一个根路径 这样的代码行很常见: require_once('../../lib/some_class.php'); 这种方法有很多缺点: 它首先搜索php包括路径中的指定 ...