如何在 Angular 中使用 jQuery？

在开始在 angular 中使用 jQuery 之前，我们需要在我们的系统上安装它。现在基本上有两种安装jQuery的通用方法：
注意：在开始本教程之前，您应该知道这里使用的软件是 Microsoft Visual Studio 代码，并且已经安装了 NodeJs 和 typescript 以使用 angular。

1. 使用 NPM 方法：
   现在使用 NPM 方法安装 jQuery，我们需要通过在 VS Code 终端运行命令来创建一个新的 angular 应用程序。

   ng new angular1

   这里 angular1 是应用程序的名称，它需要几秒钟的时间，但它将使用所有必需的文件创建 angular 应用程序。
   
   现在我们“cd”到应用程序文件夹来安装jquery。我们在 VS Code 终端执行以下命令：

   cd angular1
   npm install jquery --save
   

   
   在此之后，您的 angular 应用程序就可以与 jquery 一起使用了。

2. 使用 jQuery CDN：
   在浏览https://jquery.com/download/ 时，您可以轻松找到 jQuery CDN 并下载它。
   始终建议坚持使用最新版本的官方 CDN，因为它支持子资源完整性 (SRI)。现在要使用 jQuery CDN，您需要直接从 jQuery CDN 域引用脚本标记中的文件。具有子资源完整性属性的代码将是这样的。此处使用 jQuery 3.4.1。

   上面的代码将包含在 angular 应用程序的 HTML 文件（ app.component.html ）的 head 标签中。

   安装 jQuery 后，我们需要将其设为全局。在 jQuery 模块中，’dis’ 文件夹下的 jquery.min.js 不是公开的。要使 jQuery 全局化，我们需要执行以下操作：
   该步骤涉及浏览到位于 Angular CLI 项目文件夹根目录下的文件“angular-cli.json”并找到脚本：[]property，并包含给定的 jQuery 文件夹路径

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

   

   现在要确认这个路径，浏览到node_modules -> jquery -> dist -> jquery.min.js。
   
   您将看到路径，这意味着您已将 jQuery 库全局添加到此应用程序中。为了使这些更改在应用程序中平滑过渡，我们必须使用 serve 重新运行此应用程序。

   ng serve -open 

   

   现在要使用 jQuery，剩下的就是将它导入到您想要使用 jquery 的任何组件中。

   import * from jquery

注意：所有示例程序均使用 Microsoft Visual Studio 代码执行。

• 示例：现在要继续本教程，我们需要在 app.component.html 中包含 Html 代码

  
  
    
  
      
  
    
  
      
  GeeksforGeeks
      
  Jquery in Angular
      click me 
  
    
  
  

• 我们需要在 app.component.ts 中包含以下代码以使按钮执行操作。

  import * as $ from 'jquery'
  import {
      Component, OnInit
  }
  from‘ @angular / core’;
  export class AppComponent implements OnInit {
      ngOnInit() {
          $(‘button’).click(function() {
              alert(‘GeeksForGeeks’);
          });
      }
  }
  

  要运行此应用程序：
  在应用程序的 HTML 和组件部分包含上述代码后，我们将通过在终端中输入命令来运行此应用程序：

  ng serve 

  
  输入上述命令后，转到您的 Web 浏览器并点击地址https://localhost:4200/以加载您的应用程序。

  输出：
  

在上面的代码中，我们首先导入jquery来使用它的组件。然后我们需要实现可以从 Angular Core 导入的 ngOnInit Lifecycle Hook。我们可以在 ngOnInit 方法中编写 jQuery 代码，为了将动作添加到我们在 app.component.html 中创建的按钮，我们在 ngOnInit 方法中添加一个 button.click 事件。
现在运行上面的程序

示例：在此示例中，我们使用 angular 中的 jquery 为 Html 中的字段设置动画。我们在 app.controller.html 中编写 Html 代码，在 app.controller.ts 中编写 angular code/jquery。
HTML代码：

  

    

  

    

      GeeksforGeeks
  
    
Jquery in Angular
    Start Animation 
    

      jQuery in Angular
  

  

角度代码：

import { Component, OnInit} from ‘@angular/core’;
import * as $ from 'jquery' 
export class AppComponent implements OnInit {
ngOnInit(){
$(document).ready(function(){
            $("button").click(function(){
                var div=$("div");
                div.animate({left:'100px'}, "slow");
                div.animate({fontSize:'5em'}, "slow");
            });
        });
}

输出：
单击按钮之前

点击按钮后

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。