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

没问题，我来帮你解决这个需求！你想要在指令里获取当前关联组件的选择器名称，其实分两种场景（结构型指令/属性指令）都能实现，下面针对你用的*myDir结构型指令，以及更简单的属性指令场景分别说明：

场景1：结构型指令（你的当前用法：*myDir="Var"） #

因为*语法糖会把组件包裹在<ng-template>里，指令实际绑定在这个模板上，所以我们需要通过ViewContainerRef和TemplateRef来访问模板内的组件实例，再获取它的选择器：

import { Directive, Input, ViewContainerRef, TemplateRef, ComponentRef } from '@angular/core';

@Directive({ selector: '[myDir]' })
export class MyDirDirective {
  private currentComponentSelector: string | null = null;

  constructor(
    private viewContainer: ViewContainerRef,
    private templateRef: TemplateRef<any>
  ) {}

  @Input() set myDir(value: any) {
    // 先清空已有视图，避免重复渲染
    this.viewContainer.clear();
    
    // 渲染模板中的组件
    const embeddedView = this.viewContainer.createEmbeddedView(this.templateRef);
    
    // 获取视图中的组件实例（假设模板仅包含目标组件）
    const componentNode = embeddedView.rootNodes[0];
    if (componentNode?.componentRef) {
      const componentRef = componentNode.componentRef as ComponentRef<any>;
      
      // 方式1：借助Angular内部元数据获取选择器（注意：ɵcmp是内部API，版本更新可能变化）
      this.currentComponentSelector = componentRef.instance.constructor.ɵcmp.selector;
      
      // 方式2：更稳定的方案——在组件中手动暴露选择器（推荐）
      // this.currentComponentSelector = componentRef.instance.constructor.selector;
      
      // 根据选择器执行逻辑
      if (this.currentComponentSelector === 'my-component1') {
        console.log('执行my-component1专属操作');
        // 比如控制显示：如果不需要渲染可以不调用createEmbeddedView，这里根据你的需求调整
      } else if (this.currentComponentSelector === 'my-component2') {
        console.log('执行my-component2专属操作');
      }
    }
  }
}

稳定方案补充（避免依赖内部API） #

在每个组件中添加静态属性暴露选择器：

// my-component1.component.ts
@Component({ selector: 'my-component1', ... })
export class MyComponent1 {
  static readonly selector = 'my-component1'; // 手动添加静态属性
}

之后在指令里就可以通过componentRef.instance.constructor.selector安全获取选择器。

场景2：属性指令（如果不需要结构型指令的渲染控制） #

如果你只是需要在组件上绑定指令获取选择器，不需要用*的结构型功能，可以改成属性指令，直接注入ElementRef获取组件标签名：

import { Directive, Input, ElementRef } from '@angular/core';

@Directive({ selector: '[myDir]' })
export class MyDirDirective {
  private currentComponentSelector: string;

  constructor(private elementRef: ElementRef) {
    // 获取组件的标签名，转小写就是元素选择器名称
    this.currentComponentSelector = this.elementRef.nativeElement.tagName.toLowerCase();
  }

  @Input() set myDir(value: any) {
    if (this.currentComponentSelector === 'my-component1') {
      // 执行你的操作
    }
  }
}

使用方式改成：<my-component1 [myDir]="Var"></my-component1>

这样两种方案你可以根据自己的实际需求选择，都能实现获取组件选择器的目标！

内容的提问来源于stack exchange，提问作者Munna Babu