javascript - 如何声明一个全局函数来从浏览器控制台调用 Angular 服务？

Question

我们有一个要求，即我们想要开发一个“迷你”测试框架以在我们的 Angular 应用程序中使用。该框架的重点是能够操纵 API 调用来更改响应正文和状态代码，以便触发应用程序中的各种错误处理程序，并确保应用程序正确响应错误的 API 调用。

为此，我一直在研究如何从 Angular 外部调用 Angular 服务。 This article描述了如何创建服务，然后通过调用 window.fireAngularEvent('sampleEventName', args) 函数从 Angular 外部触发它。

但是，当我尝试通过浏览器执行此操作时，我得到以下信息:Uncaught TypeError: window.fireAngularEvent is not a function

这是我的 Angular 服务

export class GlobalApiTestingFrameworkService {

  constructor() {
    window['fireAngularEvent'] = (eventName, args) => {
      console.log('fireAngularEvent : ' + eventName + ' : ' + args);
    }
  }
}

我需要做什么才能调用 window.fireAngularEvent 函数？我需要在 Angular 之外的 JS 文件中定义它吗？如果是这样，我到底应该在函数体内包含什么以允许它与服务通信？我链接的文章不是很清楚。

Answer 1

问题是由于 window['fireAngularEvent '] 中的 空格 将定义替换为 window['fireAngularEvent'] 并且您'将能够毫无问题地调用 window.fireAngularEvent。

确保您的服务至少实例化一次。

可以肯定的是，您可以像这样在 AppComponent 中使用您的服务:

export class AppComponent  {
    constructor(private globalApiTestingFrameworkService: GlobalApiTestingFrameworkService){
    }
}