Angular 2及以上版本如何在组件HTML模板中使用enum枚举

Angular 2+（包括Angular 9及更高版本）的HTML模板默认只能直接访问对应组件类实例上暴露的成员，直接在模板中调用外部定义的Tab枚举会报错，是因为模板上下文没有绑定这个枚举的引用。

推荐解决方案：将枚举绑定为组件类的属性 #

你只需要在组件类中把需要用到的枚举赋值给类的成员属性即可，修改后的组件代码如下：

@Component({
 selector: 'test',
 templateUrl: 'test.component.html',
})
export class TestComponent{
  // 新增这行，把枚举赋值给组件类的属性（属性名可自定义，此处和枚举名保持一致便于识别）
  readonly Tab = Tab;
  constructor(){}
  ngOnInit(){}
}

export enum Tab{
 tab1='tab 1',
 tab2='tab 2',
 tab3='tab 3'
}

模板中使用示例 #

完成上述绑定后，就可以在模板中正常调用枚举值了，常见场景示例：

<!-- 条件判断场景 -->
<div *ngIf="activeTab === Tab.tab1">
  这是tab1的内容
</div>

<!-- 组件传值场景 -->
<app-tab [tabType]="Tab.tab2"></app-tab>

补充说明 #

• 如果枚举定义在单独的文件中，只需要先在组件文件导入该枚举，再按上述方式赋值给组件属性即可，逻辑完全一致。
• 建议给绑定的枚举属性加readonly修饰符，避免运行时意外修改枚举值。
• 如果你需要在多个组件中频繁使用同一个枚举，也可以封装成自定义管道来返回枚举值，避免每个组件都重复绑定属性。

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