從Angular 2組件中訪問`selector`

我在想如何訪問我們傳入@Component裝飾器的selector。從Angular 2組件中訪問`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查詢可靠地找到我通過自己選擇的角度元素。

我不是用量角器

來源

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

來源

2017-03-03 13:09:32

這可能是現在唯一的方法，現在更老的（現在打破）的方式更好，因爲它不需要添加註入，並且可以在不需要實例的情況下訪問它，在寫入結束時使用它結束測試以減少重複。 –

過時見https://stackoverflow.com/a/42579760/227299

你需要得到您的組件相關的元數據：

重要提示註解，當您運行AOT compiler得到剝離出來如果您正在編譯模板，則使此解決方案無效

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

來源

2016-05-12 13:25:41

這看起來很有希望，'如何Reflect.getMetadata'能夠知道它應該尋找的'MyComponent'元，如果我們不告訴它什麼？當我調用Reflect.getMetadata（'annotations'）時，我目前收到錯誤;錯誤是Reflect.getMetadata（'annotations'） VM61 angular2.sfx.dev.js：2652 Uncaught TypeError（...）getMetadata @ Reflect.getMetadata（'annotations'，this，'annotations'）'看起來它需要兩個額外的參數 –

通過傳遞'this.constructor'作爲第二個參數來解決您的問題。 –

請使用適用的Angular 2版本來限定此答案 - 從版本2.3.0開始，這似乎已過時 – Neoheurist

從Angular 2組件中訪問`selector`

回答

相關問題