如何在Angular TypeScript的ngOnInit()中调用第三方JavaScript函数

解决步骤： #

• 1. 声明全局函数类型，消除TypeScript报错
  在你的组件.ts文件顶部添加全局声明，让TypeScript识别xyz这个全局函数：

  declare var xyz: () => void;
  

  这样TS就不会因为找不到xyz标识符而抛出编译错误。

• 2. 处理异步脚本的加载时序问题
  因为脚本是通过async属性引入的，组件初始化时脚本可能还未加载完成，直接调用会导致xyz is not defined错误，推荐两种处理方式：

  • 方式一：监听脚本加载完成事件
    找到页面中的目标脚本元素，监听其load事件，确保脚本加载完成后再调用函数：

    ngOnInit(): void {
      if (typeof xyz !== 'undefined') {
        // 脚本已加载，直接调用
        xyz();
      } else {
        const targetScript = document.querySelector('script[src="https://someurl.com/thescript.js"]');
        if (targetScript) {
          targetScript.addEventListener('load', () => {
            xyz();
          });
        }
      }
    }
    

  • 方式二：轮询检查函数是否存在
    如果无法通过事件监听脚本加载，可设置一个短间隔的轮询，直到函数可用再调用：

    ngOnInit(): void {
      const invokeXyzWhenReady = () => {
        if (typeof xyz === 'function') {
          xyz();
        } else {
          setTimeout(invokeXyzWhenReady, 100);
        }
      };
      invokeXyzWhenReady();
    }
    

• 3. 直接调用（仅适用于脚本必然提前加载完成的场景）
  若你能确保异步脚本在组件初始化前已经加载完毕（比如脚本体积极小），可直接在ngOnInit中调用：

  ngOnInit(): void {
    xyz();
  }
  

内容的提问来源于stack exchange，提问作者Faris Švrakić