Question

我试图在指令中获取选择器名称，我不确定是否可能或如何做到这一点。

<my-component1 *myDir="Var"> </my-component1>
<my-component2 *myDir="Var"> </my-component2>
<my-component3 *myDir="Var"> </my-component3>

我在上面给出的多个组件上使用相同的指令，现在我需要在Directive中获取当前组件 selector 名称，如下所示。请有人告诉我如何在指令

中获取选择器名称

@Directive({
  selector : '[myDir]

'
    })

    export class MyDirDirective {
       constructor (){
         this.currentSelector  = getCurrentComponentSelector;
       }
    }
     @Input() set myDir(value:any){
      if(this.currentSelector==='my-component1'){
          i will do some action, display or not decide
      }
    }

Answer 1

您应该使用ElementRef并获取标记名称

constructor(private el: ElementRef) {
  const selector = el.nativeElement.tagName;
}

ngOnInit() {
  const selector = this.el.nativeElement.tagName;
}

（我不确定它是否适用于构造函数，因此请测试两种方法）

Answer 2

我不确定这是否正确，但是当我通过templateRef整个响应时，我从下面的位置看到了组件选择器。所以我用它作为临时解决方案。我希望这可以帮助别人。

<强> this.templateRef [ '_ DEF'] [ '元件'] [ '模板'] [ 'lastRenderRootNode'] [ '元件'] [ '名称'];

   export class MyDirDirective {
       constructor (private templateRef: TemplateRef<any>){
            this.currentSelector = this.templateRef['_def']['element']['template']['lastRenderRootNode']['element']['name'];
       }
    }

  @Input() set myDir(value:any){
      if(this.currentSelector === value){
          i will do some action, display or not decide
      }
    }

Answer 3

这是一种更清洁的解决方案，可与AOT一起使用，并且当您不在有问题的组件中时：

const components = [ MyComponent ];
/*
  ...
  Anything that can be injected into
*/
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  // Loop through each component
  components.forEach(element => {
    // Get its resolved factory
    const factory = this.componentFactoryResolver.resolveComponentFactory(element);

    console.log('Factory:', factory);
    console.log('Selector:', factory.selector);
  });
}

如何在Directive中获取组件选择器名称？ Angular 4

3 个答案: