错误主题: ReferenceError: $ is not defined in Angular 10 - Javascript

当你在使用Angular 10框架时，如果你碰到了"ReferenceError: $ is not defined"这个错误，这意味着你正在尝试使用$符号，但它并未被正确地定义。$是jQuery库中的一个内置方法，但在Angular中没有自己的定义，应该使用类别名或注入相关服务的方式来解决此问题。以下是一些常见情况和解决方案:

Angular 10和jQuery

如果你需要同时使用Angular 10和jQuery，则需要按照以下步骤进行:

1. 在你的angular.json文件中添加jQuery和相应的插件。

   "scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/@popperjs/core/dist/umd/popper.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
   

] ```

2. 导入jQuery。可以在Angular组件中导入。

   import * as $ from 'jquery';
   

3. 通过类别名使用jQuery，而不是$，如下所示:

   $('.example-class').hide();
   

Angular 10和其他外部库

如果你需要与Angular 10集成其他外部库，其中某些库使用$符号，则应该使用InjectionToken和依赖注入方式来解决此问题。以下是一个示例:

1. 在你的Angular模块文件中定义InjectionToken。

   import { InjectionToken } from '@angular/core';
   
   export const JQ_TOKEN = new InjectionToken<object>('jQuery');
   

2. 在你的angular.json文件中添加jQuery。

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

3. 在你的Angular模块文件中@Injectable装饰器下注入jQuery并使用别名。

   import { Injectable, Inject } from '@angular/core';
   import * as $ from 'jquery';
   import { JQ_TOKEN } from './jQuery.service';
   
   @Injectable()
   export class MyService {
       constructor(@Inject(JQ_TOKEN) private $: any) {}
   
       someMethod() {
           this.$('.example-class').hide();
       }
   }
   

4. 在你的组件中，你可以像这样注入服务。

   import { Component, Inject } from '@angular/core';
   import { MyService } from './my-service.service';
   import { JQ_TOKEN } from './jQuery.service';
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   
   export class AppComponent {
       constructor(private myService: MyService, @Inject(JQ_TOKEN) private $: any) {}
   
       someMethod() {
           this.myService.someMethod();
       }
   }
   

以上是解决"ReferenceError: $ is not defined"报错的两种方式。如果你在Angular应用程序中使用$符号其他地方出现此问题，则需要检查$符号使用的地方是否有正确定义。