Javascript 如何在HTML中使用常量枚举

我正在使用最新版本的

Angular

，并尝试访问HTML中的常量枚举，不知道如何才能做到这一点。这是枚举

export const enum InputTypes {
    DragDrop = "dragDrop",
    Text = "text",
    Search = "search"
}

由于枚举导出问题，我需要在

enum

前面声明

const

。我试过的东西

*ngIf="inputTypes.Search"

第一种方法

export class ChipsComponent implements OnInit {
    constructor() { }
    ngOnInit(): void {}
    public get inputTypes(): typeof InputTypes {
      return InputTypes; 
    }
  }

export class ChipsComponent implements OnInit {
    constructor() { }
    ngOnInit(): void {}
    inputTypes = InputTypes;
  }

第二种方法

export class ChipsComponent implements OnInit {
    constructor() { }
    ngOnInit(): void {}
    public get inputTypes(): typeof InputTypes {
      return InputTypes; 
    }
  }

export class ChipsComponent implements OnInit {
    constructor() { }
    ngOnInit(): void {}
    inputTypes = InputTypes;
  }

错误

'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query

tsconfig.json

  "compilerOptions": {
    "preserveConstEnums": true
    }

如果我没有将enum声明为const，那么上面的方法将起作用，但对于const值，我并不确定

有一个悬而未决的问题，一个解决方案是

templateImports: [someConstant, UserStatus, isDevMode]

这将不起作用，但以下可能：

templateImports: {someConstant, UserStatus, isDevMode}

即使这一个也不起作用，在

templateImports

TypeScript支持上出现错误，这些支持是常量字符串，将该功能与联合结合在一起，您的结构与枚举非常相似，但问题要小得多

示例：

输入类型='dragDrop'|'text'|'search'；
导出类芯片组件{
@Input（）appType:appType；
}

...

---

文字类型只是预定义的字符串，所以在角度模板上使用它没有问题，甚至可以在所需的编辑器/IDE上完成代码。有趣的是，TypeScript编译器将阻止任何使用与您定义的字符串值不同的字符串值的编译。

您在

tsconfig.json

文件中启用了吗？在编写时，它的默认值为

false

@miqh。我也做了同样的事情。我认为我们不能直接在模板上使用

enum

，将其值分配给组件中的一个变量，然后在模板上访问该变量。@NicholasK您能提供一个例子吗。它应该是常量Enum，但不想硬编码“text”。这就是我需要枚举的原因