web-dev-qa-db-ja.com

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

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

例えば

@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}"を自動的に追加するディレクティブを作成し、Seleniumクエリを使用してセレクターでangular要素を確実に見つけることができるようにします。

分度器を使用していません

angularangular2-directivesangular2-componentsangular2-decorators
13
Juan Mendes

ElementRefを使用します：

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

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

[〜＃〜]時代遅れ[〜＃〜]参照 https://stackoverflow.com/a/42579760/227299

コンポーネントに関連付けられたメタデータを取得する必要があります。

重要な注意AOTコンパイラを実行すると、注釈が削除されます このソリューションを事前にレンダリングすると無効になりますテンプレートのコンパイル

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