关于在angular2中引入第三方插件或者框架(jquery)

由于本人也是初入angular2不久,很多问题也许解决了,确不知其原由,也有一些问题,解决了后面又出来同样的错误,关于这些,请谅解.

关于这个问题,我自己也是想了很久,总算是能用上了,

想在angular2中引用jquery的话,高大上的一个方法是,在package.json中的dependencies中写入,执行cnpm i;安装;

 "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "tinymce": "4.5.3",
    "jquery": "^3.1.1",
    "zone.js": "^0.8.4"
  },

然后在需要用jquery的组件中声明: declare var $:any;

import { Component, OnInit } from '@angular/core';
declare var $:any; 


@Component({
    moduleId: module.id,
    selector: 'myIndex',
    styleUrls:['../../assets/css/index.css'],
    templateUrl: 'index.component.html'
})

或者是在typings.d.ts中声明引入,这样就可以在所有的组件中直接使用,而不需要在每个组件中重复声明:

代码如下:

declare var JQuery: any;
declare var jQuery: any;
declare var $: any;

最后一步,在.angular.cli.json中引入jquery.min.js文件;也许会有很多人问了,不是已经安装好了 ,为什么还要另外引入呢?我也求解!然而没有一步,$就是undefined!

最后一步也可以这样做,在首页,src下面的index.html中,直接引入jquery.min.js,也是可以的,不过这样就显的有点Low了!

欢迎讨论!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏主机笔记

最新版chevereto3.10.5使用体验

使用chevereto图床几天之后,发现这个图床系统还是挺好用的,虽然安装简单,功能很强大。 既然是一个功能的网站,就说说他使用的体验 ? chevereto网...

5145
来自专栏魏琼东

.NET快速开发实践之应用IExtenderProvider实现对象与UI控件的绑定

         现在企业级的信息系统应用开发之中,数据层采用了ORM,解放了之前开发最大工作量的核对SQL语句,我到现在还曾经记得在2002年实医院管理信息系...

1856
来自专栏FreeBuf

攻破黑市之拿下吃鸡DNF等游戏钓鱼站群

前段时间有个网友给我发了个网址,说找到个专门做钓鱼网站的连接,让我看看,然后就引出了一系列事件。

1933
来自专栏前端儿

Fiddler使用AutoResponder进行本地文件和线上文件的映射

就捞起尘封已久的 Fiddler,既然线上的JQ加载不出来,那就做个本地文件的映射吧,使用本地的JQ库代替线上的

1021
来自专栏偏前端工程师的驿站

CentOS6.5菜鸟之旅:安装输入法(小呀小企鹅)

一、前言                                  假如在登录系统的时候语言选择了中文,那么是系统会自带ibus的中文输入法。但由于我打...

1898
来自专栏Danny的专栏

html页面导出为pdf(jsPDF、iText、wkhtmltopdf)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

8551
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板 3.X/4.x 忘记密码解决方法

2792
来自专栏熊二哥

Eclipse常见设置与操作

Eclipse虽然被IDEA超越了,但仍然是最佳的JAVA开发工具哈。因为经常会在不同的开发环境中进行开发,所以对Eclipse常见操作做一个记录,以便于查阅,...

1919
来自专栏一个会写诗的程序员的博客

React Router 之 browserHistoryHistoriesHistories

前端工程采用 SPA 模式 hashHistory , 在集成到生产环境中的时候,使用browserHistory :

842
来自专栏更流畅、简洁的软件开发方式

分页解决方案 —— GridView + QuickPager + QuickPager_SQL + DataAccessLibrary + 数据库

    这里要说的不仅仅是一个分页控件,而是一套解决方案,包括如何显示数据、显示分页导航,如何得到分页用的sql语句(等效于存储过程),如何提取数据,如何绑定控...

2138

扫码关注云+社区