在角度HTML页面中使用Typescript枚举的正确方法(例如角度ng级)

Question

角和打字稿的新手.

我有打字稿枚举如下

public enum MyEnum{
   A = 0,
   B = 1,
   C = 2
}

范围变量如下 -

$scope.myLetter: MyEnum = MyEnum.B;

进行枚举检查的正确方法是什么？

选项1:比较html页面中枚举的整数值 -

<div ng-class="{classA: myLetter === 0, classB: myLetter === 1, classC: myLetter === 2}">Test panel</div>

选项2:从控制器范围方法获取类名

$scope.getClass(value: myLetter): string{
    if(value === MyEnum.A)
    return 'classA';

    if(value === MyEnum.B)
    return 'classB';

    if(value === MyEnum.C)
    return 'classC';
}

并将html元素作为 -

<div ng-class='getClass(myLetter)'>Test panel</div>

方案3:回答给出"RyanNerd"在Angular.js和NG-开关时-模仿枚举

对我来说,选项2是可取的,其余选项将ng-class值中的检查作为字符串,这不会给我们静态类型强制执行.如果有,请分享您的观点或任何其他更好的选择.

Answer 1

从控制器范围方法获取类名

我不喜欢让控制器知道类名.

1. 您可以将转换器功能添加到范围:

   $scope.myEnumName = (value: MyEnum) => MyEnum[value];
   

   并在模板中使用它:

   ng-class="{'A':'ClassA', 'B':'ClassB', 'C':'ClassC'}[myEnumName(myLetter)]"
   

2. 或添加开关功能

   $scope.switchMyEnum =
       <T>(value: MyEnum, cases: { [value: string]: T }) => cases[MyEnum[value]];
   

   模板:

   ng-class="switchMyEnum(myLetter, {'A':'ClassA', 'B':'ClassB', 'C':'ClassC'})
   

3. 如果只需要myLetter切换:

   $scope.switchMyLetter =
       <T>(cases: { [value: string]: T }) => cases[MyEnum[$scope.myLetter]];
   

   模板:

   ng-class="switchMyLetter({'A':'ClassA', 'B':'ClassB', 'C':'ClassC'})
   

4. 如果要在许多范围内使用多个枚举:

   angular.module("MyApp", [])
     .run(["$rootScope", (root: {}) => {
       function registerSwitchers(...enumInfos: [string, { [value: number]: string }][]) {
         enumInfos.forEach(enumInfo => {
           var switcherName = enumInfo[0]
           var enumType = enumInfo[1]
           root[switcherName] = (value: any, cases: { [value: string]: any }) => cases[enumType[value]];
         });
       }
       registerSwitchers(
         ["switchMyEnum1", MyEnum1],
         ["switchMyEnum2", MyEnum2]);
     }])