如何让Angular组件接受两个枚举的任一值并区分来源？

当两个枚举存在重复值时，直接用enumA | enumB作为输入类型确实无法区分来源，下面提供几种可行的方案，你可以根据需求选择：

方案1：用带类型标记的联合类型替代枚举 #

既然你并非必须使用枚举，这种方式最直接，通过给每个类型添加唯一的标识字段来区分来源：

// 定义两个带标记的类型
type TypeA = {
  kind: 'typeA';
  value: number; // 对应原enumA的数值
};

type TypeB = {
  kind: 'typeB';
  value: number; // 对应原enumB的数值
};

// 组件输入改为联合类型
@Input()
public type!: TypeA | TypeB;

// 使用时判断
ngOnInit() {
  if (this.type.kind === 'typeA') {
    console.log('来自TypeA:', this.type.value);
  } else {
    console.log('来自TypeB:', this.type.value);
  }
}

这种方式完全避免了数值重复带来的歧义，类型判断清晰可靠。

方案2：给枚举值包装类型标识（保留枚举的同时解决歧义） #

如果还是想保留枚举，可以把输入改为包含枚举值和来源标记的对象：

enum EnumA {
  Foo = 1,
  Bar = 2
}

enum EnumB {
  Foo = 1,
  Baz = 3
}

// 定义包装类型
type WrappedEnum = 
  { source: 'enumA', value: EnumA } | 
  { source: 'enumB', value: EnumB };

// 组件输入
@Input()
public type!: WrappedEnum;

// 判断逻辑
handleType() {
  switch(this.type.source) {
    case 'enumA':
      // 处理EnumA的逻辑
      break;
    case 'enumB':
      // 处理EnumB的逻辑
      break;
  }
}

父组件传递时需要明确包装：

<app-my-component [type]="{ source: 'enumA', value: EnumA.Foo }"></app-my-component>

方案3：新增输入属性指定类型来源 #

在组件中添加一个额外的输入属性，用来明确当前type的来源：

enum EnumA {
  Foo = 1,
  Bar = 2
}

enum EnumB {
  Foo = 1,
  Baz = 3
}

@Input()
public type!: EnumA | EnumB;

@Input()
public typeSource!: 'enumA' | 'enumB';

// 判断逻辑
ngOnChanges(changes: SimpleChanges) {
  if (changes.type) {
    if (this.typeSource === 'enumA') {
      // 按EnumA处理
    } else {
      // 按EnumB处理
    }
  }
}

父组件使用时同时传递两个属性：

<app-my-component [type]="EnumA.Foo" [typeSource]="'enumA'"></app-my-component>

这三种方案都能解决数值重复时的类型歧义问题，其中方案1最推荐，因为它完全摆脱了枚举的限制，类型安全性最高。

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