Truy cập `bộ chọn` từ trong một thành phần Angular 2

Question

Tôi đang cố gắng tìm ra cách tôi có thể truy cập vào selector mà chúng tôi chuyển vào trang trí @Component.

Ví dụ

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

Cuối cùng, tôi muốn sử dụng này để tạo ra một chỉ thị mà sẽ tự động thêm một thuộc tính data-tag-name="{this.component.selector}" vì vậy mà tôi có thể sử dụng các truy vấn Selenium đáng tin cậy tìm các yếu tố góc của tôi bằng cách chọn của họ.

Tôi không sử dụng thước đo góc

Answer 1

Sử dụng 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

lỗi thời Xem https://stackoverflow.com/a/42579760/227299

Bạn cần phải nhận được các siêu dữ liệu liên quan đến thành phần của bạn:

Lưu ý quan trọng Chú thích được lột ra khi bạn chạy AOT compiler hiển thị giải pháp này không hợp lệ nếu bạn đang biên dịch trước các mẫu

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