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

13 浏览
0 Comments

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

我正在使用Angular 8。我想从浏览器控制台（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';

0

3 答案

0 Comments

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

在Angular 10+中，方法ng.probe不再存在。您可以使用ng.getComponent代替：

// 获取根组件
ng.getComponent(document.querySelector('app-root'));
// 根组件中的任何属性（注入的对象）或方法都可以使用：
const abcService = ng.getComponent(document.querySelector('app-root')).abcService;
abcService.getSomeAwesomeResults();

谢谢，这非常有帮助。在Angular 9中也存在ng.getComponent。

如果您想要更新页面上的所有组件，并进行测试，您可能会发现这个方法很有用：

document.querySelectorAll('app-YOURCOMPONENTS').forEach(component => { ng.getComponent(component).yourPUBLICFUNCTION()})

以上就是解决在Angular 8中如何从浏览器控制台访问一个注入的服务的方法。

0
0 Comments

在Angular 8中，如果我想从浏览器控制台访问一个已注入的服务，可以通过以下方法解决：

首先，注入器的get方法的令牌值可以是类引用（对象），字符串或数字值，这取决于你如何设置提供者。

如果提供者是类引用的话，可以这样获取服务：

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)

当我尝试只输入类名（"get(AbcService)"）时，控制台报错说无法解析服务名 -- "Uncaught ReferenceError: AbcService is not defined"。

如果你像这样设置AbcService的提供者{provide : 'AbcService' , useClass :AbcService}，它将正常工作，但这种情况通常不常见，通常最常见的设置提供者的方法是使用类引用。

因为我使用的是Angular 8（而不是angularjs），规则是否有所改变？例如，我的providers块中有"providers: [AbcService, ...]"，但尝试"get(AbcService)"和'get("AbcService")'都失败了。

你无法直接访问类引用，但可以将它保存在全局数组中，在这里使用。

抱歉，我不太明白你的意思。你能在你的答案中解释一下如何使用名称"AbcService"来获取对我的服务的引用吗？

你尝试过ng.probe($0).componentInstance吗？

我已经更新了答案并创建了一个演示，希望这能帮到你。

0
0 Comments

问题的原因是在控制台中无法直接访问从注入的服务中注入的属性。解决方法是通过使用ng.probe(document.querySelector('app-root')).componentInstance.abcService来获取注入的服务。

解决方法中提到，注入的服务将作为componentInstance的属性可用。如果AbcService被注入到AppComponent中，可以使用以下代码在控制台中获取它：

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

然而，它并没有显示为"componentInstance"的一个字段。这可能是因为它是通过"import { AbcService } from '/services';"进行导入的。请问它是如何被注入到组件中的？

0