Angular中如何在HTML加载前定义reCAPTCHA的myCallback回调函数

我之前也踩过这个坑，问题的核心很明确：reCAPTCHA加载完成后，会直接去全局作用域查找你在data-callback里指定的函数名，但Angular组件内部定义的函数默认是封装在组件实例里的，并不会暴露到全局window对象上，所以就会出现找不到函数的报错。

下面给你两种靠谱的解决方法，优先推荐第一种：

方法一：将回调函数挂载到全局window对象 #

你需要把myCallback明确挂载到全局window上，这样reCAPTCHA就能找到它了。同时要注意用箭头函数保留组件的上下文，确保在回调里能正常访问组件的router、route等服务：

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

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnInit() {
    // 将回调挂载到全局window，箭头函数保留组件上下文
    (window as any).myCallback = () => {
      const recaptchaResponse = grecaptcha.getResponse();
      console.log('ReCAPTCHA响应:', recaptchaResponse);
      // 这里可以正常调用组件的服务，比如跳转路由
      // this.router.navigate(['/some-path']);
    };
  }

  ngOnDestroy() {
    // 组件销毁时清理全局变量，避免内存泄漏
    delete (window as any).myCallback;
  }
}

对应的HTML代码保持不变：

<div class="g-recaptcha" data-sitekey="my_site_key" data-callback="myCallback"></div>

方法二：使用reCAPTCHA的Angular官方封装库 #

如果不想手动处理全局函数的问题，可以用Angular生态里成熟的reCAPTCHA封装库（比如ng-recaptcha），它会帮你自动处理回调的上下文绑定，不用再手动暴露全局函数。不过这个方法需要你调整现有代码，引入第三方依赖。

为什么你之前的写法不行？ #

你之前在构造函数里定义的this.onloadCallback只是组件内部的一个变量，并不是全局作用域下的myCallback函数，reCAPTCHA根本找不到它。而data-callback属性要求的是全局可访问的函数名称字符串，所以必须把函数暴露到window上才行。

内容的提问来源于stack exchange，提问作者s.singh