Zugriff auf "Selektor" aus einer Angular 2-Komponente

Question

Ich versuche herauszufinden, wie ich auf die selector zugreifen kann, die wir in den @Component Dekorateur übergeben.

Zum Beispiel

@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 
    } 
} 

Letztlich würde Ich mag diese verwenden, um eine Richtlinie zu erstellen, die ein Attribut fügt automatisch data-tag-name="{this.component.selector}" so dass ich Selenium Anfragen zuverlässig verwenden kann, um meine Winkelelemente durch ihre Wähler zu finden.

Ich bin nicht mit Winkelmesser

Answer 1

Verwendung 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 Siehe https://stackoverflow.com/a/42579760/227299

Sie müssen die Metadaten im Zusammenhang mit Ihrer Komponente erhalten:

Wichtiger Hinweis Anmerkungen erhalten gestrippt, wenn Sie die AOT compiler laufen Diese Lösung wird ungültig, wenn Sie Vorlagen vorkompilieren

@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 
    } 
}