angular - 从 Angular 2 组件中访问 `selector`

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 查询来通过他们的选择器可靠地找到我的 Angular 元素。

我没有用 Protractor

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