Angular集成jQuery库

版权声明：转载请注明出处 https://blog.csdn.net/daqiang012/article/details/88369908

当构建 Angular 应用时，我们可以使用jQuery等第三方库。

集成方式有以下两种：

1、安装库

在项目根目录下执行以下命令，使用 npm 包管理器来安装该库及其依赖：

npm install jquery --save
npm install @types/jquery

在使用该库的组件或文件中，添加如下代码：

import * as $ from 'jquery';

2、添加到运行时的全局范围中

在项目根目录下执行以下命令，使用 npm 包管理器来安装该库及其依赖：

npm install jquery --save

在 angular.json 配置文件中，把关联的脚本文件添加到 "scripts" 数组中：

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

测试：

在页面加入如下代码：

<button>Test</button>

在组件加入如下代码：

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

//declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'angular-jquery';
  
  ngOnInit() {
	$('button').on('click', function(){
		alert("OK");
	});
  }

}

运行服务，打开界面，单击Test按钮，弹出如下界面，表示集成成功：

完整代码下载：

https://github.com/daqiang123/angular-jquery.git

参考：https://www.angular.cn/guide/using-libraries

欢迎加入大华软件学院QQ群交流，群号：665714453。