如何从普通JavaScript代码中调用Angular的可注入服务

Angular 服务默认运行在 Angular 自身的依赖注入容器上下文内，外部独立 JS 文件无法直接访问，你可以通过将服务/需要调用的方法挂载到全局 window 对象的方式实现跨上下文调用。

第一步：Angular 侧暴露服务到全局 #

1. （可选）添加全局 TypeScript 类型声明 #

在 src/types.d.ts 中添加如下代码，避免 TS 类型校验报错：

declare global {
  interface Window {
    ngShared?: {
      myService?: import('./app/services/myservice').MyService,
      // 也可以只声明需要用到的方法
      getMyServiceData?: () => string
    }
  }
}
export {}

2. 挂载服务实例/方法到全局 #

你可以在根组件 AppComponent 初始化时完成挂载，确保服务已经完成依赖注入：

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { MyService } from './services/myservice';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  // 注入 MyService 实例
  constructor(private myService: MyService) {}

  ngOnInit(): void {
    window.ngShared = window.ngShared || {};
    // 方案1：暴露整个服务实例
    window.ngShared.myService = this.myService;

    // 方案2（更推荐，避免全局污染）：只暴露需要用到的方法，注意绑定this指向
    // window.ngShared.getMyServiceData = this.myService.getData.bind(this.myService);
  }
}

注意：需要确保 MyService 是根注入器注册的服务（即 @Injectable({ providedIn: 'root' })），或者已经在根模块 AppModule 的 providers 数组中声明，保证注入的是全局单例。

第二步：修改 viewer.js 调用全局方法 #

需要注意 Angular 应用初始化是异步过程，需要添加判断避免方法未挂载就调用：

var exam = {};
function setup(){
  // 如果使用方案1暴露整个服务
  if(window.ngShared?.myService) {
    const result = window.ngShared.myService.getData();
    // 此处添加拿到返回值后的业务逻辑
    console.log(result);
  } 

  // 如果使用方案2只暴露方法
  // if(window.ngShared?.getMyServiceData) {
  //   const result = window.ngShared.getMyServiceData();
  //   console.log(result);
  // }

  // 未挂载完成则100ms后重试
  else {
    setTimeout(setup, 100);
  }
}

注意事项 #

• 如果 MyService 的 getData 方法是异步方法（返回 Observable），在 JS 中调用时需要用 .subscribe() 订阅拿到返回值。
• 挂载方法时必须使用 .bind(this.myService) 绑定正确的 this 指向，否则方法内部调用服务注入的其他属性（比如示例中的 http）时会报错。

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