能否在jQuery函数中调用Angular 5函数？this作用域报错求助

这个问题本质是作用域绑定的问题——在jQuery的回调函数里，this的指向已经不再是你的Angular组件实例了，而是指向触发事件的DOM元素或者jQuery上下文，所以才会出现Cannot read property 'onPaymentStatus' of null的错误。下面给你三种实用的解决方法：

方法1：提前保存组件的this到变量 #

在进入jQuery回调前，把组件实例的this存到一个变量（比如that）里，之后在回调里用这个变量调用组件方法：

import { Component, OnInit } from '@angular/core';
declare var $: any; // 确保jQuery已全局引入或通过模块导入

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  ngOnInit(): void {
    // 保存组件实例的this到变量
    const that = this;
    $('#payment-button').on('click', function() {
      // 使用that访问组件的onPaymentStatus方法
      that.onPaymentStatus();
    });
  }

  onPaymentStatus(): void {
    // 你的业务逻辑
    console.log('处理支付状态更新');
  }
}

方法2：使用箭头函数 #

箭头函数不会创建自己的作用域，它会继承外层（也就是组件）的this指向，直接用this就能调用组件方法：

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  ngOnInit(): void {
    $('#payment-button').on('click', () => {
      // 箭头函数里的this就是组件实例
      this.onPaymentStatus();
    });
  }

  onPaymentStatus(): void {
    console.log('处理支付状态更新');
  }
}

方法3：用bind()绑定作用域 #

通过bind(this)把组件的this绑定到jQuery回调函数上，强制回调里的this指向组件实例：

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  ngOnInit(): void {
    $('#payment-button').on('click', function() {
      this.onPaymentStatus();
    }.bind(this)); // 绑定组件的this到回调函数
  }

  onPaymentStatus(): void {
    console.log('处理支付状态更新');
  }
}

额外提醒 #

虽然以上方法能解决问题，但在Angular项目里建议尽量减少jQuery的使用——Angular本身提供了完整的事件绑定（比如(click)）和DOM操作API，混合使用jQuery可能会导致组件生命周期和DOM状态不同步，增加维护成本。如果必须使用jQuery，确保在ngOnInit或ngAfterViewInit等生命周期钩子中操作DOM，此时组件对应的DOM元素已经渲染完成。

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