从Angular 2组件中访问“选择器”

Question

我正试图弄清楚如何访问传递给@Component装饰器的selector。

例如

@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

OUTDATED请参阅https://stackoverflow.com/a/42579760/227299

您需要获得与组件相关联的元数据：

重要提示运行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 3

如果您需要选择器名称而无法访问组件的ElementRef:，这里有一个替代方案

const components = [MyComponent];
for (const component of components) {
  const selector = component.ɵcmp.selectors[0][0];
  console.log(selector);
}

老实说，第一种方法感觉很粗糙，谁知道这是否只是内部使用的呢？我想我应该把它包括在内，这样也许有人可以对它有所了解？

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

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

Answer 4

由于Anguarr v14.1，您可以执行以下操作：

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