8

Sto cercando di capire come accedere allo selector che passiamo nel decoratore @Component.Accesso al selettore `` all'interno di un componente Angular 2

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

risposta

12

Uso ElementRef:

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

@Component({ 
    selector: 'my-component' 
}) 
export class MyComponent { 
    constructor(elem: ElementRef) { 
    const tagName = elem.nativeElement.tagName.toLowerCase(); 
    } 
} 
+0

Questo probabilmente è l'unico modo per farlo ora. Il modo più vecchio (ora rotto) era migliore poiché non richiedeva l'aggiunta di un'iniezione e sarebbe accessibile senza richiedere un'istanza, che uso quando scrivo fine per terminare i test per ridurre al minimo la duplicazione. –

7

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 
    } 
} 
+0

Questo sembra essere molto promettente, come si 'Reflect.getMetadata' grado di sapere che si suppone per cercare metadati per' MyComponent' se non stiamo dicendo che qualcosa? Attualmente sto ricevendo un errore quando chiamo 'Reflect.getMetadata ('annotazioni');' L'errore è 'Reflect.getMetadata ('annotazioni') VM61 angular2.sfx.dev.js: 2652 Tipo non rilevatoErrore (...) getMetadata @ Reflect.getMetadata ('annotations', this, 'annotations') 'Sembra che abbia bisogno di due parametri aggiuntivi –

+1

Corretta la tua risposta passando' this.constructor' come secondo argomento. –

+2

Si prega di qualificare questa risposta con la versione di Angular 2 a cui si applica - a partire dalla versione 2.3.0 questo sembra essere scaduto – Neoheurist

Problemi correlati