网上找了很多版本尝试都不行,最后在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. (转)MapReduce Design Patterns(chapter 4 (part 1))(七)

    Chapter 4. Data Organization Patterns 与前面章节的过滤器相比,本章是关于数据重组.个别记录的价值通常靠分区,分片,排序成倍增加.特别是在分布式系统中,因为这能提高 ...

  2. C#中正则表达式编程(未完,待补充)

    对于只存储一个匹配,可用Match类: 一般模式: Regex reg = new Regex(string pattern); string str = "###############& ...

  3. iOS开发CocoaPods使用

    一.为什么用CocoaPods iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三 ...

  4. learn go return fuction

    package main // 参考文章: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/06.9.md im ...

  5. Win7 使用密码共享磁盘连接总是提示输入密码

    Win7 使用密码共享磁盘连接总是提示输入密码,只要设置下面这里就可以了.默认是保持来宾身份.

  6. 考研系列 HDU2241之早起看书 三分

    考研并不是说说就可以了,要付诸于行动. 对于Lele来说,最痛苦的事莫过于早起看书了,不过为了考研,也就豁出去了.由于早起看书会对看书效率产生影响,所以对于要什么时候起床看书,还是有必要考虑的. 经过 ...

  7. linux自学(二)之centos7镜像安装

    上一篇:linux自学(一)之vmware虚拟机安装 虚拟机安装完成之后,就可以安装centos镜像了 centos官网:https://www.centos.org/ centos7镜像 由于我的电 ...

  8. Promise详解

    前言 && 基础概念 Promise 是解决 JS 异步的一种方案,相比传统的回调函数,Promise 能解决多个回调严重嵌套的问题. Promise 对象代表一个异步操作,有三种状态 ...

  9. 好用的 convert freestyle jenkins jobs to pipeline 插件使用

    1. 安装      安装,重启即可,非常简单   2. 使用     原有配置,主要列出执行     生成的jenkins pipeline   3. 构建效果   4. 参考资料 https:// ...

  10. 40+个对初学者非常有用的PHP技巧

    1.不要使用相对路径,要定义一个根路径 这样的代码行很常见: require_once('../../lib/some_class.php'); 这种方法有很多缺点: 它首先搜索php包括路径中的指定 ...