如何在Angular应用中调用外部未导入的JavaScript函数？

没问题，这个场景我很熟悉，尤其是在扩展现有平台时经常遇到。核心思路是利用全局window对象来访问目标脚本暴露的doSomething方法——毕竟你在控制台用javascript:协议能成功调用，本质就是在全局上下文执行，下面给你具体的实现方案：

方法1：类型安全的调用（推荐） #

因为Angular基于TypeScript，直接访问window.doSomething会触发类型报错，所以我们可以扩展window的类型声明来解决这个问题：

1. 在你的Angular项目src/目录下创建一个global.d.ts文件，内容如下：

declare global {
  interface Window {
    doSomething: (param: string) => void;
  }
}

export {};

2. 之后在组件或服务的按钮点击事件里，就能安全调用这个函数了：

// 组件中的按钮点击处理函数
onTriggerAction() {
  // 先判断函数是否存在，避免脚本未加载导致报错
  if (window.doSomething && typeof window.doSomething === 'function') {
    window.doSomething("stringParamItNeeds");
  }
}

方法2：快速临时解决（类型断言） #

如果你不想额外添加类型声明文件，可以用TypeScript的类型断言绕过类型检查：

onTriggerAction() {
  const targetFn = (window as any).doSomething;
  if (targetFn && typeof targetFn === 'function') {
    targetFn("stringParamItNeeds");
  }
}

关键注意事项 #

• 务必确保那个带哈希的main.*.bundle.js脚本在Angular应用之前加载，或者在调用函数前确认它已经初始化完成，否则会出现doSomething is not a function的错误。
• 这种方式完全不需要硬编码脚本的哈希文件名，完美避开了脚本更新后路径变化的问题，完全匹配你的需求。

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