如何在Angular应用中调用非Angular函数？（含jQuery调用场景）

我来帮你搞定这个问题！你遇到的报错本质是：Angular组件里定义的edituser是组件类的私有方法，并不在全局作用域里，而onclick属性或者jQuery触发的点击事件，都是在全局window上下文里查找函数的，所以浏览器会提示“edituser未定义”。

下面是两种可行的解决方法，你可以根据场景选择：

方法一：将组件方法挂载到全局window对象 #

这是最直接适配你需求的方案，把组件的方法暴露到window上，让全局上下文能访问到：

1. 在组件的ts文件中，修改代码如下：

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

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

  ngOnInit(): void {
    // 把组件的edituser方法绑定到window对象，用箭头函数保证this指向组件实例
    (window as any).edituser = () => this.edituser();
  }

  edituser(): void {
    alert('hiii');
  }

  ngOnDestroy(): void {
    // 组件销毁时一定要删除全局变量，避免内存泄漏
    delete (window as any).edituser;
  }
}

2. 为什么要用箭头函数？
   如果直接写(window as any).edituser = this.edituser，那么当函数执行时，this会指向window而不是组件实例，用箭头函数可以保留组件的上下文，确保你后续如果要调用组件的其他属性/方法都能正常工作。

方法二：用Renderer2监听点击事件（替代原生onclick） #

如果你不想暴露全局函数，也可以用Angular的Renderer2来给DOM元素添加点击监听，这样既不需要onclick属性，也能让jQuery正常触发点击事件：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit, OnDestroy {
  private clickListener: () => void;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit(): void {
    // 获取.actions元素，添加点击监听
    const actionsEl = this.el.nativeElement.querySelector('.actions');
    this.clickListener = this.renderer.listen(actionsEl, 'click', () => {
      this.edituser();
    });
  }

  edituser(): void {
    alert('hiii');
  }

  ngOnDestroy(): void {
    // 移除监听，防止内存泄漏
    this.clickListener();
  }
}

这种方法更符合Angular的最佳实践，不需要污染全局作用域，而且jQuery触发.actions的点击事件时，监听也会正常响应。

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