如何在Angular中使用jQuery？

在开始在angular中使用jQuery之前，我们需要在系统上安装它。现在基本上有两种安装jQuery的通用方法：
注意：在开始本教程之前，您必须了解此处使用的软件是Microsoft Visual Studio代码，其中已安装NodeJ和typescript以与angular一起使用。

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

   ng new angular1

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

   cd angular1
   npm install jquery --save
   

   
   之后，您的角度应用程序就可以与jquery一起使用了。

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

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

   安装jQuery之后，我们需要将其设置为全局。在jQuery模块中，“ dis”文件夹下的jquery.min.js是不公开的。为了使jQuery具有全局性，我们需要执行以下操作：
   该步骤涉及浏览到文件“ angular-cli.json” ，该文件位于Angular CLI项目文件夹的根目录下，并找到脚本：[]属性，并包括给定的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以使用其组件。然后，我们需要实现ngOnInit生命周期挂钩，该挂钩可以从Angular Core导入。我们可以在ngOnInit方法内编写jQuery代码，要将操作添加到在app.component.html中创建的按钮，请在ngOnInit方法内添加button.click事件。
现在运行上面的程序

示例：在本示例中，我们使用angular中的jquery对Html中的文件进行动画处理。我们在app.controller.html中编写HTML代码，并在app.controller.ts中编写角度代码/ 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");
            });
        });
}

输出：
单击按钮之前

单击按钮后