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

摘要: 最近在使用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了!

欢迎讨论!