Açısal 2 bileşeninin içinden "seçici" ye erişme

Question

@Component dekoratörüne geçirdiğimiz selector'a nasıl erişebileceğimi anlamaya çalışıyorum.

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

Sonuçta Örneğin

, ben otomatik yüzden güvenilir onların seçici tarafından benim açısal elemanları bulmak için Selenyum sorguları kullanabileceği bir öznitelik data-tag-name="{this.component.selector}" ekleyen bir yönergeyi oluşturmak için bu kullanmak istiyorum. Eğer AOT compiler çalıştırdığınızda dışarı şeritli

Önemli Not Açıklamalar:

Ben iletki

Answer 1

Kullanım 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

ESKİ Sen meta verilerin bileşenle ilişkili almak gerekir https://stackoverflow.com/a/42579760/227299

Bkz kullanmıyorum Şablonu doldururken bu çözümü geçersiz kılar

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