网上找了很多版本尝试都不行,最后在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. yii2.0 使用不同语言

    1.建立语言目录.文件.项目根目录建立messages文件夹.存放不同语言对应的目录文件. 例如中文和英文 message 下建立两个文件夹 en.zh_CN 里面可以对应着多个翻译文件 2.在mai ...

  2. 人生苦短之我用Python篇(XML模块)

    XML模块 http://baike.baidu.com/link?url=-mBgvMdEDU7F05Pw7h_hBt7A0ctYiPm5a_WvKVLknydnRXKRIyydcVZWRjd_5H ...

  3. 【剑指offer】04A二维数组中的查找,C++实现

    1.题目 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数数组和一个整数,判断数组中是否含有该整数. 2.思路 首先选取数 ...

  4. maven scope-一览表

  5. HDU3833 YY's new problem 卡时间第一题

    Given a permutation P of 1 to N, YY wants to know whether there exists such three elements P[i 1], P ...

  6. 云设计模式-Design patterns for microservices

    云设计模式 https://azure.microsoft.com/zh-cn/blog/design-patterns-for-microservices/ https://www.cnblogs. ...

  7. Objective-C的属性和成员变量用法及关系浅析

    在使用Objective-C语言进行了一段时间的iOS开发之后,发现自己的语言基础相对薄弱,于是开始弥补自己的短处.我发现在用过一种语言之后,再回过头来看它的很多原理会发现有更加深刻的理解.下面就对一 ...

  8. 重温CLR(十二) 委托

    回调函数是一种非常有用的编程机制,它的存在已经有很多年了..NET通过委托来提供回调函数机制.不同于其他平台(比如非托管C++)的回调机制,委托的功能要多得多.例如,委托确保回调方法是类型安全的(这是 ...

  9. hessian+spring集成应用

    注意事项 ▲JAVA服务器端必须具备以下几点:---->包含Hessian的jar包---->设计一个接口,用来给客户端调用---->实现该接口的功能---->配置web.xm ...

  10. LG3565 [POI2014]HOT-Hotels

    题意 有一个树形结构,每条边的长度相同,任意两个节点可以相互到达.选3个点.两两距离相等.有多少种方案? 1≤n≤5 000 分析 参照小塘空明的题解. 很明显到一个点距离相等的三个点两两之间距离相等 ...