Question

我正在使用Angular8。我想从我的浏览器控制台（Chrome开发工具）中访问注入的服务。我可以这样从浏览器控制台访问注入器

ng.probe(document.querySelector('app-root')).injector

我想在开发工具控制台中访问注入的服务，但是当我尝试这样做时

ng.probe($0).injector.get("AbcService")

我收到以下错误。我已验证我的服务名称正确。从控制台访问我的服务还需要做什么？

core.js:8991 Uncaught Error: StaticInjectorError(AppModule)[ActivationService]: 
  StaticInjectorError(Platform: core)[AbcService]: 
    NullInjectorError: No provider for AbcService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveNgModuleDep (core.js:21208)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21897)
    at Object.resolveDep (core.js:22268)

编辑：我试图访问的服务像这样导入到我的组件中

import { AbcService } from '@myapp/services';

Answer 1

注入的服务将作为属性在 componentInstance 上提供。如果将AbcService注入到 AppComponent

  export class AppComponent {  
    constructor(private abcService: AbcService) {}
  }

然后您可以使用以下命令在控制台中获取它：

ng.probe(document.querySelector('app-root')).componentInstance.abcService

Answer 2

至少在 Angular 10+ 中，方法 ng.probe 不再存在。您可以改用 ng.getComponent:

// Get the root component
ng.getComponent(document.querySelector('app-root'));

// Any property (injected object) or method in the root component can be used:
const abcService = ng.getComponent(document.querySelector('app-root')).abcService;
abcService.getSomeAwesomeResults();

Answer 3

注入器get方法令牌的值可以是类引用（对象），字符串或数字值，这与设置提供程序的方式有关

providers : [
  AbcService // class ref
]

您可以像这样获得服务

ng.probe(document.querySelector('app-root')).injector.get(AbcService)

但是当您运行该应用程序时，您将无法从开发者控制台获得对AbcService的引用，AbcService在全球范围内不适用。

如果令牌只是一个字符串值

providers : [
  {provide : 'AbcService' , useClass :AbcService} , 
]

这将起作用

ng.probe(document.querySelector('app-root')).injector.get(`AbcService`)

在两种情况下，如果令牌都不存在，则会引发错误

已更新！ ??

您可以像这样保存对NgModuleRef类的引用

platformBrowserDynamic()
  .bootstrapModule(AppModule).then(ref => {
    window['ngRef'] = ref; // ?
  })
  .catch(err => console.error(err));

然后可以只创建一个对象，该对象包含对要测试的所有服务的引用

import {AbcService} from './abc.service';
import {ZService} from './z.service';

export const ServRef = {
  AbcService,
  ZService
}

全局保存该对象

window['servRef'] = ServRef;

在开发者控制台中，您可以执行此操作

ngRef.get(servRef.AbcService);
ngRef.get(servRef.ZService)

demo ⚡⚡

在Angular 8中，如何从浏览器控制台访问注入的服务？

3 个答案: