Angular 2コンポーネント内から `selector 'にアクセスする

Question

私はselectorにアクセスして、@Componentデコレータに渡す方法を理解しようとしています。例

@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}"を追加するディレクティブを作成するためにこれを使用したいと思います。あなたがAOT compilerを実行したときに注釈が取り除かます

重要な注意：私は分度器

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

Answer 2

古いを使用していない

はあなたのコンポーネントに関連付けられたメタデータを取得する必要がありhttps://stackoverflow.com/a/42579760/227299

を参照してください。テンプレートをあらかじめコンパイルしている場合、このソリューションを無効にする

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