从 Angular 2 组件中访问 `selector`
Accessing `selector` from within an Angular 2 component
我想知道如何访问我们传递给 @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 元素。
我没有使用量角器
已过时 参见
您需要获取与您的组件关联的元数据:
重要提示 当您 运行 如果您预编译模板 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
}
}
使用ElementRef
:
import { Component, ElementRef } from '@angular/core'
@Component({
selector: 'my-component'
})
export class MyComponent {
constructor(elem: ElementRef) {
const tagName = elem.nativeElement.tagName.toLowerCase();
}
}
如果您需要选择器名称而不访问组件的 ElementRef
:
,这里有一个替代方案
const components = [MyComponent];
for (const component of components) {
const selector = component.ɵcmp.selectors[0][0];
console.log(selector);
}
老实说,第一种方法感觉很老套,谁知道这个 ɵ 是否应该只供内部使用?我想我会把它包括在内,这样也许有人可以阐明它?
所以,这可能是一条更安全的路线:
constructor(private factory: ComponentFactoryResolver) {
const components = [MyComponent];
for (const component of components) {
const { selector } = this.factory.resolveComponentFactory(component);
console.log(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 元素。
我没有使用量角器
已过时 参见
您需要获取与您的组件关联的元数据:
重要提示 当您 运行 如果您预编译模板 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
}
}
使用ElementRef
:
import { Component, ElementRef } from '@angular/core'
@Component({
selector: 'my-component'
})
export class MyComponent {
constructor(elem: ElementRef) {
const tagName = elem.nativeElement.tagName.toLowerCase();
}
}
如果您需要选择器名称而不访问组件的 ElementRef
:
const components = [MyComponent];
for (const component of components) {
const selector = component.ɵcmp.selectors[0][0];
console.log(selector);
}
老实说,第一种方法感觉很老套,谁知道这个 ɵ 是否应该只供内部使用?我想我会把它包括在内,这样也许有人可以阐明它?
所以,这可能是一条更安全的路线:
constructor(private factory: ComponentFactoryResolver) {
const components = [MyComponent];
for (const component of components) {
const { selector } = this.factory.resolveComponentFactory(component);
console.log(selector);
}
}