我们为您提供在blog.bitsrc.io上发布的Aditya Modi文章的翻译。 本文是关于在Angular应用程序中使用jQuery的。
偶尔，我会谨慎处理。 但是，这次小心谨慎并不会造成伤害，因为将jQuery集成到Angular中并不是那么简单。
实际上，为什么我写这篇文章？ 有时jQuery对于在Angular上进行开发确实是必不可少的，但是，这种JavaScript框架很少与该库关联。 Angular负责渲染和管理DOM，如果您使用jQuery对其进行更改，则有可能获得极其意外的结果。
提示 ：使用
Bit ，您可以快速共享Angular组件并在应用程序中重复使用它们。 这将使您和您的团队花费更少的时间来创建新的应用程序。 试试看。
正因为如此，在某些情况下，有必要对框架进行干预是有道理的，所以这可能是真正的出路。 这些案例不在我的博客中讨论，但是，也许我将在下一篇文章中讨论它们。 现在，让我向您展示如何将jQuery库添加到Angular。 在本教程中，我将使用VS Code。 您可以选择其他代码编辑器或下载
适用于Windows，Linux和macOS的Visual Studio Code 。
Angular中的JQuery集成
首先，我们需要使用
ng new命令创建一个Angular应用程序。 接下来，在
cd的帮助
cd转到将通过npm安装jQuery库的文件夹。 让我们将结果应用程序
angularmeetsjquery 。
ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save
听起来不错，但jQuery纯粹主义者宁愿选择通过jQuery CDN而不是npm下载。 CDN是将jQuery库添加到Angular应用程序的另一种方法，但是我更喜欢使用npm方法。 如果查看
https://jquery.com/download/ ，您将找到jQuery CDN库和Google，Microsoft，CDNJS和jsDelivr的其他CDN网络。 我建议使用CDN的最新正式版本，因为它支持SRI（子资源完整性）机制。
要使用jQuery CDN，只需直接从jQuery CDN域中创建一个到
script标签中文件的链接。 具有Subresource Integrity函数的代码将如下所示。 （如您所见，我正在使用jQuery库3.3.1版。）
<script src=”https:
可以从code.jquery.com资源复制脚本。 接下来，您需要将其插入<
body >标记末尾的
index.html文件中。
使jQuery库成为全局
jQuery模块的dis文件夹中的
jquery.min.js文件不是公共的（该文件夹的正确名称是
jquery.min.js 近似编辑 ）。 要使jQuery库具有全局性，请转到文件
.angular-cli.json并在其中写入指向jQuery文件路径的链接。
将链接传输到Angular应用程序内的文件路径时，根文件夹为src。 但是，jQuery库位于
node_modules目录中。 因此，您需要确定
.angular-cli.json的正确路径。
../node_modules/jquery/dist/jquery.min.js
要确保路径正确，请转至
node_modules→jquery→dist→jquery.min.js 。 在这里，您可以看到指定的路径，这意味着已为该应用程序全局添加了jQuery库。 不要期望浏览器中的localhost：4200页面重新加载自身，因为该文件位于src文件夹之外。 为了使更改出现在应用程序中，您必须重新启动它。
ng serve –open
在Angular应用程序中使用jQuery
要开始在Angular框架中使用jQuery库，您需要转到应用程序组件。 我将向您展示这两种技术如何与简单的
button HTML元素一起使用。 但首先，删除
app.component.html文件中的所有代码行，并添加
button HTML元素。
<button> Click me </button>
页面将自动重新加载，然后将出现一个按钮。
我们需要在
app.component.ts文件中设置jQuery的字符。
declare var $: any;
然后插入
ngOnInit生命周期挂钩。 为此，您可以从Angular Core导入OnInit。
import { Component, OnInit} from '@angular/core';
添加
ngOnInit 。
export class AppComponent implements OnInit {
无论DOM是否准备就绪，您都可以在
ngOnInit方法内编写jQuery代码，就像标准Web应用程序开发一样。 要测试在
app.component.html创建的按钮，请将
button.click事件添加到
button.click方法。
export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } }
如果单击按钮，将出现“ Wass Up”。
结论
将jQuery添加到Angular以及使用此捆绑包是一个可疑的想法。
是的，乍一看该方法似乎很简单。 但是，正如我在本文开头所说的那样，无论如何看待这两种技术的联合使用，这种想法通常都是不好的。 在实际的Angular应用程序中，您必须处理比事件相关的HTML
button元素复杂得多的事情。 我对所有
使用Angular并正在寻找机会在其TypeScript代码中嵌入jQuery的人的建议：如果没有必要，则不要这样做。 祝您在jQuery和Angular领域取得成功的实验！