如何在Angular外部获取Angular 6单例服务？

针对你想模拟WebSocket服务、让UI获取模拟数据的需求，我整理了几种靠谱的实现方式，按推荐程度排序：

1. 用Angular测试框架的TestBed（最推荐，官方规范） #

这是Angular官方主推的测试方式，完全不需要依赖全局对象，能干净地控制服务依赖和模拟行为。

步骤很简单：

• 先在测试文件里用TestBed.configureTestingModule配置测试模块，把你的WebSocket服务加入providers数组
• 通过TestBed.inject()获取服务实例
• 用测试框架（Jasmine/Jest）的spyOn来存根服务方法，返回模拟数据

举个代码例子：

import { TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { WebSocketService } from './web-socket.service';

// 定义你的模拟数据
const mockWebSocketData = { type: 'message', content: '模拟的WebSocket消息' };

describe('WebSocketService 模拟测试', () => {
  let wsService: WebSocketService;

  beforeEach(() => {
    // 配置测试模块
    TestBed.configureTestingModule({
      providers: [WebSocketService]
    });
    // 获取服务实例
    wsService = TestBed.inject(WebSocketService);
  });

  it('应该返回模拟数据，不真实连接服务器', () => {
    // 存根connect方法，返回模拟的Observable数据
    spyOn(wsService, 'connect').and.returnValue(of(mockWebSocketData));

    // 调用方法并断言结果
    wsService.connect().subscribe(data => {
      expect(data).toEqual(mockWebSocketData);
    });
  });
});

这种方式适合单元测试和组件集成测试，能完全隔离真实服务的逻辑，专注于测试UI的表现。

2. 手动引导应用后获取服务（适合E2E测试） #

如果是端到端测试（比如用Cypress/Playwright），需要在真实应用环境中替换服务行为，可以手动引导Angular应用，然后从模块引用中拿到服务实例，甚至可以把它挂到window上方便测试脚本访问。

示例代码：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { WebSocketService } from './app/web-socket.service';
import { of } from 'rxjs';

const mockWebSocketData = { type: 'message', content: 'E2E模拟消息' };

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    // 从模块注入器获取服务
    const wsService = moduleRef.injector.get(WebSocketService);
    // 替换服务的connect方法，返回模拟数据
    wsService.connect = () => of(mockWebSocketData);
    // 把服务挂到window，方便测试脚本调用
    (window as any).WebSocketServiceInstance = wsService;
  })
  .catch(err => console.error(err));

之后在你的E2E测试脚本里，就能直接通过window.WebSocketServiceInstance访问服务，随时调整模拟行为。

3. 临时把服务挂到window（应急方案） #

如果是快速验证或者特殊场景，可以在服务的构造函数里，只在测试环境下把自身暴露到window对象上，但注意绝对不要把这个代码带到生产环境！

示例：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class WebSocketService {
  constructor() {
    // 仅在非生产环境暴露到window
    if (!environment.production) {
      (window as any).WebSocketService = this;
    }
  }

  connect() {
    // 真实的WebSocket连接逻辑
  }
}

然后在测试脚本里就能直接用：

const mockWsService = (window as any).WebSocketService;
// 存根方法
spyOn(mockWsService, 'connect').and.returnValue(of(mockData));

这个方式虽然简单，但会污染全局环境，只适合临时测试用，不推荐作为长期方案。

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