22

我试图弄清楚如何访问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 查询通过它们的选择器可靠地找到我的角度元素。

我没有使用量角器

4

3 回答 3

29

使用ElementRef

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

@Component({
  selector: 'my-component'
})
export class MyComponent {
  constructor(elem: ElementRef) {
    const tagName = elem.nativeElement.tagName.toLowerCase();
  }
}
于 2017-03-03T13:09:32.437 回答
9

过时请参阅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
  }
}
于 2016-05-12T13:25:41.273 回答
4

如果您需要选择器名称而无法访问组件的 ,这是一种替代方法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);
  }
}
于 2021-07-21T03:50:28.980 回答