如何在jQuery与Angular 2间互访作用域变量及函数？附代码求助

一、让jQuery访问Angular组件的变量与函数 #

你的代码里有两个核心问题需要修正：

• 事件绑定时机不对：直接在组件类顶层写jQuery("#btn").on(...)时，组件视图还未初始化，DOM元素#btn可能还不存在，导致绑定失效。
• this指向错误：普通function()里的this指向触发点击事件的DOM元素，而非Angular组件实例，所以无法访问组件的variable1和displaySomething()。

修正后的组件代码 #

import { Component, AfterViewInit } from '@angular/core';
declare let jQuery: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class ComponentName implements AfterViewInit {
  variable1: string = "我是Angular组件变量";

  // 实现AfterViewInit钩子，确保视图初始化完成后再绑定事件
  ngAfterViewInit(): void {
    // 方法1：使用箭头函数，箭头函数会继承外部上下文的this（即组件实例）
    jQuery("#btn").on("click", () => {
      console.log(this.variable1); // 成功访问组件变量
      this.displaySomething(); // 成功调用组件方法
    });

    // 方法2：保存组件实例的this到临时变量，在普通函数中使用
    // let self = this;
    // jQuery("#btn").on("click", function(){
    //   console.log(self.variable1);
    //   self.displaySomething();
    // });
  }

  displaySomething(): void {
    alert("调用了Angular组件的displaySomething方法");
  }
}

关键说明 #

• ngAfterViewInit是Angular的生命周期钩子，会在组件视图及其子视图初始化完成后触发，此时#btn已存在于DOM中，能确保事件绑定成功。
• 箭头函数不会创建自己的this，它会沿用外层作用域的this（也就是Angular组件实例），所以能直接访问组件的属性和方法；如果习惯用普通函数，可以提前把组件的this赋值给一个变量（比如self），在函数内部通过这个变量访问组件。

二、让Angular组件访问jQuery的变量与函数 #

如果要让Angular访问jQuery定义的变量或函数，分两种情况处理：

1. 访问全局的jQuery变量/函数 #

如果在全局作用域（比如index.html中）定义了jQuery相关的变量或函数，Angular组件中可以直接使用：

// 假设全局定义了jQuery的变量和函数
// 在index.html中：
// <script>
//   let jqueryGlobalVar = "我是jQuery全局变量";
//   function jqueryGlobalFunc() {
//     console.log("调用了jQuery全局函数");
//   }
// </script>

// 在Angular组件中：
declare let jqueryGlobalVar: any;
declare let jqueryGlobalFunc: any;

export class ComponentName {
  someMethod(): void {
    console.log(jqueryGlobalVar); // 访问jQuery全局变量
    jqueryGlobalFunc(); // 调用jQuery全局函数
  }
}

2. 访问jQuery插件/实例的变量与方法 #

如果是jQuery插件创建的实例（比如某个弹窗插件），可以把实例保存到Angular组件的变量中，后续直接访问：

// 先在组件中声明变量保存jQuery实例
private jQueryModal: any;

ngAfterViewInit(): void {
  // 初始化jQuery插件并保存实例到组件变量
  this.jQueryModal = jQuery("#modal").modal();
}

// 在组件的其他方法中访问插件的方法
openModal(): void {
  this.jQueryModal.modal('show');
}

内容的提问来源于stack exchange，提问作者Rohit Kolar