时间戳

首页 > 解决方案 > 如何在 HTML angular 中使用 const 枚举

javascript - 如何在 HTML angular 中使用 const 枚举

问题描述

我正在使用最新版本Angular并尝试在 HTML 中访问 c​​onst 枚举，但我不确定我该怎么做。这是枚举

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

由于枚举导出问题，我需要const在前面声明。enum我尝试过的事情

*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;
  }

错误

'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
    }

如果我没有将枚举声明为 const，则上述方法将起作用，但不确定 const 值

有一个未解决的问题https://github.com/angular/angular/issues/25963一种解决方案是

templateImports: [someConstant, UserStatus, isDevMode]

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

templateImports: {someConstant, UserStatus, isDevMode}

即使这个不起作用，也会出错templateImports

标签： javascriptangulartypescriptenumsangular-template

解决方案

TypeScript 支持Literal Types，它是常量字符串，将该功能与 Unions 结合起来，您的结构与枚举非常相似，但问题要少得多。

示例：

type InputTypes = 'dragDrop' | 'text' | 'search';

export class ChipsComponent {
    @Input() appType: AppType;
}

<div *ngIf="appType === 'text'">
  ...
</div>

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

推荐阅读