Angular4 - 引入第三方jquery 转载

Angular4 - 引入第三方jquery

由于最近在Angular4中引入jquery的方式，先是使用了一种普通的方式，在对应的文件中import jquery，可以实现功能。只是后来自己想着怎么把$符号变成一种全局可识别的变量，所以花了一些时间去研究它。

1. import * as $ from ‘jquery’

（1） 将第三方类库安装到本地

[plain] view plain copy

print ?

1. npm install jquery –save  

npm install jquery --save

（2）将库引入到当前的项目中去

修改.angular-cli.json的”scripts”

[plain] view plain copy

print ?

1. ”scripts”: [  
2.         ”../node_modules/jquery/dist/jquery.min.js”  
3.       ],  

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js"
      ],

（3）import * as $ from ‘jquery’;

修改app.component.ts

[javascript] view plain copy

print ?

1. import { Component } from ‘@angular/core’;  
2. import * as $&nbsp;from&nbsp;</span><span class="string">'jquery'</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>@Component({&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;selector:&nbsp;<span class="string">'app-root'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;templateUrl:&nbsp;<span class="string">'./app.component.html'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;styleUrls:&nbsp;[<span class="string">'./app.component.css'</span><span>]&nbsp;&nbsp;</span></span></li><li class=""><span>})&nbsp;&nbsp;</span></li><li class="alt"><span><span class="keyword">export</span><span>&nbsp;</span><span class="keyword">class</span><span>&nbsp;AppComponent&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;title&nbsp;=&nbsp;<span class="string">'app'</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;ngOnInit()&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;$(”body”).css(“color”, “blue”);  
3.   }  
4. }  

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  ngOnInit() {
    $("body").css("color", "blue");
  }
}

2. npm install @types/jquery –save

当我想将$变成全局变量的时候，遇到了这个命令，但是仅仅这个命令还是不行的。

上面的（1）（2）步骤还是需要的，我直接从第三步将好了。

（3）npm install @types/jquery –save

现将app.component.ts中下面的code去掉，这样才具有说明性。

[javascript] view plain copy

print ?

1. import * as $&nbsp;from&nbsp;</span><span class="string">'jquery'</span><span>;&nbsp;&nbsp;</span></span></li></ol></div><pre class="javascript" style="font-size: 14px; display: none;" name="code">import * as$ from ‘jquery’;然后启动项目，会发现报错ERROR in src/app/app.component.ts(12,4): error TS2304: Cannot find name ‘$’.

然后执行下面的命令

[plain] view plain copy

print ?

1. npm install @types/jquery –save  

npm install @types/jquery --save

（4）修改src/typing.d.ts

[javascript] view plain copy

print ?

1. /* SystemJS module definition */  
2. declare var module: NodeModule;  
3. declare var $: any;   
4. declare var jQuery: any;  
5.   
6. interface NodeModule {  
7.   id: string;  
8. }  

/* SystemJS module definition */
declare var module: NodeModule;
declare var $: any; 
declare var jQuery: any;

interface NodeModule {
  id: string;
}

至此，我们可以直接使用 $了，具体的原因，我去看过\node_modules\@types\jquery\index.d.ts，并且修改文件让其没有export，但是项目中仍然可以使用$。希望有了解这个原因的可以说明一下，不胜感激！

        </div>
            </div>

注明原文出处：https://blog.youkuaiyun.com/it_rod/article/details/78848311