在angular HTML页面中使用Typescript枚举的正确方法（例如angular ng-class）

Question

新的角度和打字。

我有如下的打字记录枚举

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

$scope.myLetter: MyEnum = MyEnum.B;

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

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

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

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

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

选项3:'ryannerd'在Angular.js和ng-switch-when-emulating enum给出的答案

对我来说，选项2更好，其余的选项将ng-class值作为字符串进行检查，这不会给我们提供静态类型强制。请分享你的观点或任何其他更好的选择，如果你有。

Answer 1

从控制器作用域方法获取类名

我不喜欢让控制器知道类名的想法。

>

您可以将转换器函数添加到作用域中：

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

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

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

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

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

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

如果要在多个作用域中使用多个枚举：

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]);
  }])