Accesso al selettore `` all'interno di un componente Angular 2

Question

Sto cercando di capire come accedere allo selector che passiamo nel decoratore @Component.

Per esempio

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

In definitiva, vorrei utilizzare questo per creare una direttiva che aggiunge automaticamente un attributo data-tag-name="{this.component.selector}" in modo che possa utilizzare le query di selenio per trovare in modo affidabile i miei elementi angolari per la loro selezione.

non sto usando goniometro

Answer 1

Uso 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

obsoleto Vedere https://stackoverflow.com/a/42579760/227299

è necessario per ottenere i metadati associati con il componente:

Nota importante NOTE ottenere spogliato fuori quando si esegue il AOT compiler il rendering di questa soluzione non è valida se si stanno compilando i modelli

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