Question

如何全局访问根Angular 2注入器的实例（例如，从浏览器控制台访问）。

在Angular 1中，它是angular.element(document).injector()。

在测试和探索过程中，使用浏览器控制台获取注入器然后访问不同组件，指令，服务等的实例会非常有用。

Answer 1

您必须在引导应用程序后将其设置为服务：

export var applicationInjector: Injector;

bootstrap([AppComponent]).then((componentRef: ComponentRef) => {
  applicationInjector = componentRef.injector;
});

然后您可以将其导入应用程序的其他部分：

import {applicationInjector} from './bootstrap';

有关详细信息，请参阅此问题：

Good way to secure multiple Angular 2 components

修改

您可以将ApplicationRef注入组件并通过它访问根注入器：

@Component({ (...) }) export class SomeComponent { constructor(private app:ApplicationRef) { var rootInjector = app.injector; } }

您需要利用依赖注入来获取它。

Answer 2

在Angular v.4.x.x中，根注入器位于PlatformRef。您可以像这样访问它：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

// create a platform    
let platform = platformBrowserDynamic();

// save reference to the global object
window['rootInjector'] = platform.injector;

// boostrap application
platform.bootstrapModule(AppModule);

或者在这样的任何组件内部：

export class AppComponent {
  constructor(platform: PlatformRef) {
      console.log(platform.injector);

但root注射器非常无用。它主要包含编译器和平台特定的数据和帮助程序：

[
  "InjectionToken Platform ID",
  "PlatformRef_",
  "PlatformRef",
  "Reflector",
  "ReflectorReader",
  "TestabilityRegistry",
  "Console",
  "InjectionToken compilerOptions",
  "CompilerFactory",
  "InjectionToken Platform Initializer",
  "PlatformLocation",
  "InjectionToken DocumentToken",
  "InjectionToken Platform: browserDynamic",
  "InjectionToken Platform: coreDynamic",
  "InjectionToken Platform: core"
]

你可能正在寻找AppModule注射器，你可以这样：

platform.bootstrapModule(AppModule).then((module) => {
  window['rootInjector'] = module.injector;
});

您可以从中提取ApplicationRef或根ComponentRef：

platform.bootstrapModule(AppModule).then((module) => {
  let applicationRef = module.injector.get(ApplicationRef);
  let rootComponentRef = applicationRef.components[0];
});

此外，如果Angular在开发模式下运行，您可以获得AppModule或延迟加载的NgModule注入器，如下所示：

ng.probe($0).injector.view.root.ngModule

Answer 3

这是Angular 9的另一种体现。

在不在生产节点中的Angular应用程序页面上打开JavaScript控制台。

在页面上找到<app-root>：

root = document.querySelector("app-root");

获取进样器。 ng()助手是一个全局变量，如果应用程序处于开发模式，则可以使用它：

injector = ng.getInjector("app-root");

Injector允许您通过其类名称获得服务。不幸的是，我不知道是否可以通过window命名空间使用Angular服务类或如何使用它。

因此，我们的下一个尝试是从页面上已经可见的元素的组件中获取服务。

appComponent = ng.getComponent(root)

通过这种方式，您可以访问任何AppComponent变量，例如您的应用可能具有“ UserService”。

appComponent.userService

UserService {http: HttpService, userSubject: BehaviorSubject}

现在您可以从控制台调用该服务：

appComponent.userService.userSubject.value.userEmail

mikko@capitalgram.com

您还可以访问不是应用程序根目录的组件，并访问绑定到它们的服务。首先，我们需要导航到该组件出现的页面。这将触发用户界面中的实际过渡。

await appComponent.router.navigate(["/another-page"])

现在，您可以通过其标签名称来获取任何可见组件：

elem = document.querySelector("app-my-component")
component = ng.getComponent(elem)

您可以看到其服务：

MyComponent(envService, http, sanitizer);

您可以使用所有用户令牌，会话等将它们戳出：

component.envService.getConfigValue()

全局访问根Angular 2注入器实例

3 个答案: