如何在Angular项目运行时动态添加自定义JavaScript函数？

当然可以实现！下面我就一步步教你怎么在Angular应用运行时动态加载并使用从Servlet获取的自定义JavaScript函数。

1. 用HttpClient获取Servlet返回的脚本内容 #

首先在你的Angular服务里注入HttpClient，发起GET请求获取library.js的文本内容：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DynamicScriptService {
  constructor(private http: HttpClient) {}

  // 加载Servlet返回的脚本
  loadLibrary(): Promise<void> {
    // 替换成你的Servlet实际地址
    return this.http.get('/your-servlet-path', { responseType: 'text' })
      .toPromise()
      .then(scriptContent => {
        this.runScript(scriptContent);
      })
      .catch(err => {
        console.error('脚本加载失败:', err);
        throw err;
      });
  }
}

2. 执行加载到的脚本内容 #

获取到脚本文本后，我们可以通过创建DOM脚本标签的方式执行它（这比eval更安全规范）：

// 在DynamicScriptService中添加这个方法
private runScript(scriptContent: string): void {
  const scriptTag = document.createElement('script');
  scriptTag.type = 'text/javascript';
  scriptTag.textContent = scriptContent;
  
  // 插入到页面中执行
  document.body.appendChild(scriptTag);
  
  // 执行完后可以移除标签，避免DOM冗余
  document.body.removeChild(scriptTag);
}

这样一来，library.js里的helloWorld函数就会成为全局函数，你可以在组件里调用它：

import { Component, OnInit } from '@angular/core';
import { DynamicScriptService } from './dynamic-script.service';

@Component({
  selector: 'app-root',
  template: '<button (click)="triggerHello()">点击弹出Hello</button>'
})
export class AppComponent implements OnInit {
  constructor(private scriptService: DynamicScriptService) {}

  ngOnInit(): void {
    // 初始化时加载脚本
    this.scriptService.loadLibrary()
      .then(() => console.log('脚本加载完成，可以调用函数啦'))
      .catch(err => console.error(err));
  }

  triggerHello(): void {
    // 通过window对象访问全局函数
    (window as any).helloWorld();
  }
}

3. 可选：让TypeScript不报错（类型安全处理） #

如果你不想看到TypeScript对window.helloWorld()的报错，可以在项目里添加全局类型声明：

在src/typings.d.ts文件中添加：

declare global {
  interface Window {
    helloWorld: () => void;
  }
}

export {};

这样以后调用window.helloWorld()就不会有类型提示错误了。

• 安全第一：一定要保证Servlet返回的脚本内容是完全可信的！如果脚本来源不可控，很容易被注入恶意代码引发XSS攻击。
• 避免全局污染：建议让Servlet返回的脚本用命名空间包裹，比如：

  window.myCustomLib = {
    helloWorld: function() { alert("hello world"); },
    // 其他自定义函数...
  };
  

  调用时就用window.myCustomLib.helloWorld()，减少和其他全局变量冲突的概率。
• 异步时机：脚本加载是异步操作，一定要确保在调用函数前脚本已经加载完成，比如用Promise的then或者async/await处理。

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