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

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方法标记值可以是类引用（对象）、字符串或数值，这与您如何设置提供程序有关

\n\n

providers : [\n  AbcService // class ref\n]\n

\n\n

你可以得到这样的服务

\n\n

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

\n\n

\n

但是当您运行该应用程序时，您将无法AbcService从开发人员控制台获取参考，该参考AbcService在全局范围内不可用。

\n

\n\n

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

\n\n

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

\n\n

这会起作用

\n\n

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

\n\n

\n

在这两种情况下，如果令牌不存在，则会抛出错误

\n

\n\n

更新！！

\n\n

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

\n\n

providers : [\n  AbcService // class ref\n]\n

\n\n

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

\n\n

import {AbcService} from \'./abc.service\';\nimport {ZService} from \'./z.service\';\n\nexport const ServRef = {\n  AbcService,\n  ZService\n}\n

\n\n

全局保存该对象

\n\n

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

\n\n

在开发者控制台中你可以这样做

\n\n

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

\n\n

演示 \xe2\x9a\xa1\xe2\x9a\xa1

\n