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

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

在Angular 1中，它是

Angular.element（document.injector（）

---

在测试和探索期间，使用浏览器控制台让injector访问不同组件、指令、服务等的实例非常有用。

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

export var applicationInjector: Injector;

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

import {applicationInjector} from './bootstrap';

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

export var applicationInjector: Injector;

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

import {applicationInjector} from './bootstrap';

有关更多详细信息，请参见此问题：

编辑

您可以将

ApplicationRef

注入组件，并通过它访问根注入器：

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

---

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

在Angular

v.4.x.x

中，根注入程序位于。您可以这样访问它：

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);

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

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

或在任何类似的组件内：

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);

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

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

但是

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

injector，您可以得到如下结果：

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);

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

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

您可以从中提取或根目录：

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

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);

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

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

---

这里是另一个角度9采取

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

在页面上找到

：

root=document.querySelector（“应用程序根”）；

去拿注射器。

ng（）

帮助程序是一个全局帮助程序，在应用程序处于开发模式时可用：

injector=ng.getInjector（“应用根”）；

Injector将允许您按服务的类名获取服务。不幸的是，我不知道Angular service类是否或如何通过

窗口

名称空间可用

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

appComponent=ng.getComponent（根）

通过这种方式，您可以访问任何

AppComponent

变量，例如您的应用程序可能具有的“UserService”

appComponent.userService

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

appComponent.userService.userSubject.value.userEmail

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

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

现在，您可以通过标记名获取任何可见组件：

elem=document.querySelector（“应用程序我的组件”）
组件=ng.getComponent（elem）

您可以看到它的服务：

MyComponent(envService, http, sanitizer);

您可以在所有用户令牌、会话等就绪的情况下戳它们：

component.envService.getConfigValue（）

是Angular 2保存在任何位置并全局可用的

ComponentRef

实例（例如

ng.core.rootComponent（）

）？在任何情况下，手动保存它比Angular 1中可用的工作都要多，但仍然很好。对于根组件，我不这么认为。也就是说，您可以将

ApplicationRef

注入到组件中，并访问根注入器。无需手动保存；-）我相应地更新了我的答案。在当前的Angular（2.4.4）中，

ApplicationRef

没有公共属性

injector

；“很明显，这是私人的。”威利，看看最新的version@RPDeshaies，检查最新版本的

ng.probe（$0）.injector.view.root.ngModule

，这样您可以获得

AppModule

或延迟加载的

ngModule

injector@yurzui，是，但仅当不启用enableProdMode（）时他问

它在测试和探索过程中可能有用

所以它会很有用：）@yurzui，是的，谢谢，我会补充答案。我还发现了一种订阅应用程序引导过程的神奇方法：）。我将写一篇关于it@yurzui，谢谢你的链接，很有趣。似乎我在注射器的层次结构上做对了：）