关于在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了!

欢迎讨论!

猜你在找的Angularjs相关文章