Angular12中如何识别多选择器指令在模板中使用的具体选择器并绑定不同类

该需求在Angular 12中完全可以实现，以下提供两种常用的可行方案：

方案1：使用@Attribute装饰器判断 #

@Attribute装饰器可以在构造阶段直接读取宿主元素的指定属性值，不存在对应属性时返回null，不需要访问DOM实例，性能更优，也支持SSR场景。

@Directive({
  selector: 'button[my-button], button[my-button-outline]',
})
export class ButtonComponent {
  @Input() color = 'primary';
  private isOutlineType: boolean;

  constructor(
    @Attribute('my-button') private myBtnAttr: string,
    @Attribute('my-button-outline') private myOutlineAttr: string
  ) {
    // 存在outline属性时标记为outline按钮类型
    this.isOutlineType = this.myOutlineAttr !== null;
  }

  @HostBinding('class')
  public get colorClass(): string {
    const btnPrefix = this.isOutlineType ? 'btn-outline' : 'btn';
    return `btn ${btnPrefix}-${this.color}`;
  }
}

方案2：通过ElementRef读取DOM属性判断 #

写法更简洁，适合无需SSR的普通前端项目，直接调用DOM原生方法判断属性是否存在即可：

import { ElementRef } from '@angular/core';

@Directive({
  selector: 'button[my-button], button[my-button-outline]',
})
export class ButtonComponent {
  @Input() color = 'primary';
  private isOutlineType: boolean;

  constructor(private elementRef: ElementRef<HTMLButtonElement>) {
    this.isOutlineType = this.elementRef.nativeElement.hasAttribute('my-button-outline');
  }

  @HostBinding('class')
  public get colorClass(): string {
    const btnPrefix = this.isOutlineType ? 'btn-outline' : 'btn';
    return `btn ${btnPrefix}-${this.color}`;
  }
}

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