Angular: 如何通过控制台获取组件依赖？

Question

我将重点放在开发工具中的组件元素上，可以执行以下操作：

 ng.probe([=11=])

获取特殊对象“DebugElement”。现在我们可以获得它的注入器：

 ng.probe([=12=]).injector

现在我想获取在此组件上定义的依赖项。依赖性定义为 class，所以我应该这样做：

ng.probe([=13=]).injector.get(MyService)

但是！服务未在控制台范围内定义。如果我把它变成一个字符串：

 ng.probe([=14=]).injector.get('MyService')

显然它也不起作用。

我正在尝试对 ReflectiveInjector.get 进行逆向工程，但目前还没有成功。有什么想法吗？

Answer 1

我们必须按照声明的方式将令牌传递给 injector.get 方法。如果我们将 class 声明为标记，则不能使用字符串。

Angular 在 ngfactory 的组件中保留声明的提供者 Plunker

function View_App_Host_0(_l) {
  return jit_viewDef0(0,[(_l()(),jit_elementDef1(0,null,null,2,'my-app',[],null,null,
      null,jit_View_App_02,jit__object_Object_3)),jit_providerDef4(4608,null,jit_MyService5,
      jit_MyService5,[]),jit_directiveDef6(49152,null,0,jit_App7,[],null,null)],null,
      null);
}

并且它使用 elementInjector 来获取依赖。

DebugElement 获取有关提供给当前节点的令牌的信息

get providerTokens(): any[] {
  const tokens: any[] = [];
  if (this.elDef) {
    for (let i = this.elDef.index + 1; i <= this.elDef.index + this.elDef.childCount; i++) {
      const childDef = this.elView.def.nodes[i];
      if (childDef.flags & NodeFlags.CatProvider) {
        tokens.push(childDef.provider !.token);
      }
      i += childDef.childCount;
    }
  }
  return tokens;
}

在组件元数据的 providers 数组中声明提供者后，令牌在 providerTokens 数组中变得可用。

所以我们可以这样写得到依赖

ng.probe([=12=]).injector.get(ng.probe([=12=]).providerTokens
    .find(x => x.name === 'MyService'))

另见

Angular: 如何通过控制台获取组件依赖？

Angular: How to get component dependancy via console?

dependency-injection

angular

angular-di