网上找了很多版本尝试都不行,最后在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的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. 如何在Angular2中使用jquery

    首先在index.html中引入jquery文件 <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"> ...

  3. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  4. angular2怎么使用第三方的库(jquery等)

    网上找了很多教材都搜索不到该部分类型,自己测试了下写了该教程. 场景说明:项目需要使用bootstrap,众所周知bootstrap没有时间日期控件的,需要使用第三方控件,我对如何在angular2中 ...

  5. angular2 引入jquery

    (注:以下命令都是在项目文件夹根目录下运行的,保证下载的文件都在项目的node_modules文件夹里面) 1. 运行  npm install jquery -save 后会发现在package.j ...

  6. angular2采用自定义指令(Directive)方式加载jquery插件

    由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery ...

  7. angular2 学习笔记 ( 第3方插件 jQuery and ckeditor )

    refer : https://forums.meteor.com/t/importing-ckeditor-using-npm/28919/2   (ckeditor) https://github ...

  8. angular2 + bootstrap +jquery 实例

    一.Create a project process: 1.use Angular CLI to create an Angular Project "demo": need th ...

  9. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

随机推荐

  1. Windows下安装Web.py快速指南

    环境介绍 首先介绍下安装使用的环境 - Windows 7 - Python 3.6 Web.py介绍 web.py是Python在Web领域一个轻量级的解决方案,所谓轻量,就是非常简单快速满足Web ...

  2. swift 3 发送 HTTP 请求函数

    private func HttpPost(requestURL:String, postString:String) -> [String : AnyObject] { return Http ...

  3. js之10天内免登陆

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 数据库备份mysqldump

    |--好友说:有些知识就是石头,走上这条路就没法绕过,就是牙齿啃碎了也要把它啃下来. ------------------------------------------ 针对当前备份做一个总结记忆: ...

  5. 转载maven安装,配置,入门

    转载:http://www.cnblogs.com/dcba1112/archive/2011/05/01/2033805.html 本书代码下载 大家可以从我的网站下载本书的代码:http://ww ...

  6. 监听器(Listener)学习(二)在开发中的常见应用

    监听器在JavaWeb开发中用得比较多,下面说一下监听器(Listener)在开发中的常见应用: 统计当前在线人数 自定义Session扫描器 一.统计当前在线人数 在JavaWeb应用开发中,有时候 ...

  7. BZOJ1183 Croatian2008 Umnozak 【数位DP】*

    BZOJ1183 Croatian2008 Umnozak Description 定义一个数的digit-product是它的各个位上的数字的乘积,定义一个数的self-product是它本身乘以它 ...

  8. 携程框架Apollo实现.NET Core微服务统一配置(测试环境-单机)

    Apollo实现.NET Core微服务统一配置(测试环境-单机) https://www.cnblogs.com/guolianyu/p/10065999.html 一.前言 注:此篇只是为测试环境 ...

  9. 《DSP using MATLAB》示例Example7.8

    窗函数的设计思想就是选择一个理想的频率选择滤波器(通常其脉冲响应函数是 非因果.无限长的),然后截断(取窗)这个无限长脉冲响应,得到一个线性相位.因果的 FIR滤波器.频率域示意图如下: 我们的目的: ...

  10. FastAdmin 如何查看 ICON 名字?

    FastAdmin 如何查看 ICON 名字? 群问题: [A货] ★^猪大胖-镇江 我想问问大家谁知道如何快速查找icon的name 每次我都要编辑权限那里去复制 [吐槽]孤狼-海口 2018/4/ ...