在 Angular html 模板中访问 c​​onst 枚举

Question

假设我有一个常量枚举：

export const enum MyConstEnum{
    Value1 = 'Value1',
    Value2 = 'Value2',
    Value3 = 'Value3'
}

现在我想在我的 Angular 模板中使用它：

<span *ngIf="name === MyConstEnum.Value1">This has some value</value>

但是，这是不可能的，因为模板看不到MyConstEnum。 那么问题来了，如何在Angular html模板中访问const enum？

如果枚举不是这样的 const

export enum MyEnum{
    Value1 = 'Value1',
    Value2 = 'Value2',
    Value3 = 'Value3'
}

有一种解决方案可以在模板的组件中创建属性

  public get MyEnumInComponent() {
    return MyEnum;
  }

和MyEnumInComponent 可以在 HTML 中访问。 但是，我有const enum。

为此，我无法像上面那样定义属性。解决办法是什么（除了把const enum改成enum）？

Answer 1

我可以在这个链接上看到https://github.com/angular/angular/issues/25963 这是一个已知问题，特别是 const enum。

There is also a work arround suggested in the discussion on the url:
templateImports: [someConstant, UserStatus, isDevMode]
This would not work, but the below could:

templateImports: {someConstant, UserStatus, isDevMode}

Answer 2

如果 TypeScript 不会删除发出的 JavaScript 代码中的 const 枚举声明，这将是可能的。

为此有专门的编译器选项preserveConstEnums：

tsconfig.json

{
  "compilerOptions": {
    ...
    "preserveConstEnums": true,
    ...
  },
  ...
}

现在，假设你有

const-enum.ts

export const enum MyConstEnum {
    Value1 = 'Value1',
    Value2 = 'Value2',
    Value3 = 'Value3'
}

您可以将其导入到组件中，例如：

import * as constEnumModule from './const-enum';

class SomeComponent {
  MyConstEnum = (constEnumModule as any).MyConstEnum;
}

它最终应该可以在您的模板中用于该组件：

<span *ngIf="name === MyConstEnum.Value1">This has some value</value>