如何在Angular 16中不使用npm引入并在组件中使用jQuery？

先处理重复引入的问题 #

你现在同时在index.html里引入了CDN版本的jQuery，又在angular.json里配置了本地文件路径，这会导致jQuery被重复加载，建议二选一：

• 选CDN：直接删掉angular.json中scripts数组里的jQuery配置项
• 选本地文件：删掉index.html里的CDN脚本标签，同时把angular.json里的路径修正为你实际的本地路径——你说文件存在assets/lib/jquery/dist下，所以正确路径应该是"src/assets/lib/jquery/dist/jquery-2.2.0.min.js"，而不是现在的src/assets/js/...

组件中使用jQuery的具体步骤 #

1. 声明全局变量
   在你的组件TS文件顶部添加一行声明，让TypeScript识别全局的$变量：

declare var $: any;

2. 在组件生命周期中调用jQuery
   要等组件视图渲染完成后再用jQuery操作DOM，所以推荐在ngAfterViewInit钩子函数里写jQuery逻辑，示例代码：

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

declare var $: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 示例：用jQuery隐藏元素
    $('#target-element').hide();
    // 示例：给元素添加类名
    $('.demo-class').addClass('highlight');
  }

}

可选：添加类型提示（更规范） #

如果想获得TypeScript的语法提示和类型检查，不用declare var $: any，可以安装jQuery的类型定义包：

npm install @types/jquery --save-dev

安装完成后，直接在组件里导入即可使用：

import * as $ from 'jquery';

这一步不是必须的，简单场景下用declare var $: any完全能满足需求。

内容的提问来源于stack exchange，提问作者Aaa a12