从Angular 2组件中访问`selector`

Question

我试图找出如何访问selector我们传递给 @Component装饰器的内容.

例如

@Component({
  selector: 'my-component'
})
class MyComponent {
  constructor() {
     // I was hoping for something like the following but it doesn't exist
     this.component.selector // my-component
  }
}

最后,我想使用它来创建一个自动添加属性的指令,data-tag-name="{this.component.selector}"以便我可以使用Selenium查询通过其选择器可靠地找到我的角度元素.

我没有使用量角器

Answer 1

用途ElementRef:

import { Component, ElementRef } from '@angular/core'

@Component({
  selector: 'my-component'
})
export class MyComponent {
  constructor(elem: ElementRef) {
    const tagName = elem.nativeElement.tagName.toLowerCase();
  }
}

Answer 2

如果您需要选择器名称而不访问组件，则可以使用以下替代方法ElementRef：

\n

const components = [MyComponent];\n\nfor (const component of components) {\n  const selector = component.\xc9\xb5cmp.selectors[0][0];\n  console.log(selector);\n}\n

\n

老实说，第一种方法感觉相当 hacky，谁知道这个 \xc9\xb5 是否应该仅供内部使用？我想我应该把它包括在内，这样也许有人可以阐明它？

\n

因此，这可能是一条更安全的路线：

\n

constructor(private factory: ComponentFactoryResolver) {\n  const components = [MyComponent];\n\n  for (const component of components) {\n    const { selector } = this.factory.resolveComponentFactory(component);\n    console.log(selector);\n  }\n}\n

\n

Answer 3

OUTDATED请参阅/sf/answers/2980583231/

您需要获取与组件关联的元数据:

重要说明如果您正在编译模板,则在运行AOT编译器时,注释会被删除,导致此解决方案无效

@Component({
  selector: 'my-component'
})
class MyComponent {
  constructor() {
    // Access `MyComponent` without relying on its name
    var annotations = Reflect.getMetadata('annotations', this.constructor);
    var componentMetadata = annotations.find(annotation => {
      return (annotation instanceof ComponentMetadata);
    });
    var selector = componentMetadata.selector // my-component
  }
}

Answer 4

从 Angualr v14.1 开始你可以这样做：

import { reflectComponentType } from '@angular/core';

@Component({
  selector: 'my-component'
})
class MyComponent {
  constructor() {
     const metadata = reflectComponentType(MyComponent);
     const selector = metadata.selector // my-component
  }
}