[英]Accessing const enums in Angular html template
Assume I have a const enum:假设我有一个 const 枚举:
export const enum MyConstEnum{
Value1 = 'Value1',
Value2 = 'Value2',
Value3 = 'Value3'
}
Now I want to use it in my Angular template:现在我想在我的 Angular 模板中使用它:
<span *ngIf="name === MyConstEnum.Value1">This has some value</value>
However, this is not possible, because MyConstEnum
is not seen by template.但是,这是不可能的,因为模板看不到
MyConstEnum
。 So the question is how to access const enum
in Angular html template?所以问题是如何访问 Angular html 模板中的
const enum
?
If enum won't be const like this如果枚举不是这样的 const
export enum MyEnum{
Value1 = 'Value1',
Value2 = 'Value2',
Value3 = 'Value3'
}
there is a solution to create property in templates' component有一个在模板组件中创建属性的解决方案
public get MyEnumInComponent() {
return MyEnum;
}
and MyEnumInComponent
will be accessible in HTML. However, I have const enum
.和
MyEnumInComponent
将在 HTML 中访问。但是,我有const enum
。
For this I cannot defined property like above.为此,我无法像上面那样定义属性。 What is the solution (except changing
const enum
to enum
)?解决方案是什么(除了将
const enum
更改为enum
)?
I can see on this link https://github.com/angular/angular/issues/25963 that it is known issue and it is specifically with const enum.我可以在这个链接https://github.com/angular/angular/issues/25963上看到这是一个已知问题,它专门针对 const 枚举。
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}
It will be possible if TypeScript won't erase const enum declaration in the emitted JavaScript code.如果 TypeScript 不会删除发出的 JavaScript 代码中的常量枚举声明,则有可能。
There is dedicated compiler options preserveConstEnums
for that:为此有专门的编译器选项
preserveConstEnums
:
tsconfig.json tsconfig.json
{
"compilerOptions": {
...
"preserveConstEnums": true,
...
},
...
}
Now, let's say you have现在,假设你有
const-enum.ts const-enum.ts
export const enum MyConstEnum {
Value1 = 'Value1',
Value2 = 'Value2',
Value3 = 'Value3'
}
You can import it in component like:您可以将其导入组件中,例如:
import * as constEnumModule from './const-enum';
class SomeComponent {
MyConstEnum = (constEnumModule as any).MyConstEnum;
}
It finally it should be available in your template for this component:它最终应该在您的模板中用于此组件:
<span *ngIf="name === MyConstEnum.Value1">This has some value</value>
Assume I have a const enum:假设我有一个常量枚举:
export const enum MyConstEnum{
Value1 = 'Value1',
Value2 = 'Value2',
Value3 = 'Value3'
}
Now I want to use it in my Angular template:现在我想在我的 Angular 模板中使用它:
<span *ngIf="name === MyConstEnum.Value1">This has some value</value>
However, this is not possible, because MyConstEnum
is not seen by template.但是,这是不可能的,因为模板看不到
MyConstEnum
。 So the question is how to access const enum
in Angular html template?所以问题是如何访问 Angular html 模板中的
const enum
?
If enum won't be const like this如果枚举不是这样的 const
export enum MyEnum{
Value1 = 'Value1',
Value2 = 'Value2',
Value3 = 'Value3'
}
there is a solution to create property in templates' component有一种在模板组件中创建属性的解决方案
public get MyEnumInComponent() {
return MyEnum;
}
and MyEnumInComponent
will be accessible in HTML.和
MyEnumInComponent
可以在 HTML 中访问。 However, I have const enum
.但是,我有
const enum
。
For this I cannot defined property like above.为此,我无法像上面那样定义属性。 What is the solution (except changing
const enum
to enum
)?解决方案是什么(除了将
const enum
更改为enum
)?
I bypassed this issue by replacing my const enum types to static properties inside classes like this:我通过将我的常量枚举类型替换为类中的 static 属性来绕过这个问题,如下所示:
export class MyEnum{
static Value1 = 'Value1',
static Value2 = 'Value2',
static Value3 = 'Value3'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.