typescript 如何在 Angular 组件中使用枚举
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49091786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use an enum in an Angular Component
提问by AlanObject
My Angular Components tend to have a global state (or "mode") so I am looking for a way to code this efficiently. What I tried to do is this:
我的 Angular 组件往往有一个全局状态（或“模式”），所以我正在寻找一种有效编码的方法。我试图做的是这样的：
@Component({
....
})
export class AbcComponent implements OnInit {
enum State {
init, view, edit, create, wait
}
state: State = State.init;
The idea is that the functions inside AbcComponent can drive the template's operation simply by setting the stateproperty. For example:
这个想法是 AbcComponent 内部的函数可以通过设置state属性来驱动模板的操作。例如：
<div class="col" *ngIf="state === State.view"> ... </div>
The problem is that the enumdefinition cannot appear inside the classstructure. And then if I move it outside the classstructure then the template doesn't have it within its local scope.
问题是枚举定义不能出现在类结构中。然后，如果我将它移到类结构之外，则模板在其本地范围内没有它。
Is there a different way to do this?
有没有不同的方法来做到这一点？
P.S. If it is of any interest what I have been doing is I have several booleanproperties, one for each state. For example modeInitmodeViewetc. It works but it is clumsy because only one should be trueat a time.
PS如果我一直在做的事情有任何兴趣，我有几个布尔属性，每个状态一个。例如modeInit modeView等。它可以工作但很笨拙，因为一次只有一个应该是真的。
回答by ConnorsFan
You can define the Stateenum outside of the class, possibly in another file:
您可以State在类之外定义枚举，可能在另一个文件中：
export enum State {
init,
view,
edit,
create,
wait
}
and assign the enum to a public field in the class:
并将枚举分配给类中的公共字段：
import { State } from "../models/app-enums.model";
@Component({
....
})
export class AbcComponent implements OnInit {
public StateEnum = State;
public state = State.init;
...
}
That public field can then be used to refer to the enum in the template:
然后可以使用该公共字段来引用模板中的枚举：
<div class="col" *ngIf="state === StateEnum.view"> ... </div>
回答by Daniel C.
You can define a method or getter and compare your current state value with the enum already imported. Like this:
您可以定义一个方法或 getter 并将当前状态值与已导入的枚举进行比较。像这样：
import { State } from "../models/state-enum.ts";
@Component({
....
})
export class AbcComponent implements OnInit {
private state: State = State.init;
...
get isView() {
return this.state === State.view;
}
}
template.html
模板.html
<div *ngIf="isView">Oh is view!</div>
回答by Tao
You could also use declaration merging to make the enum available as a static member of the component.
您还可以使用声明合并使枚举可用作组件的静态成员。
@Component({
....
})
export class AbcComponent implements OnInit {
state = AbcComponent.State.init;
}
export namespace AbcComponent {
export enum State {
init, view, edit, create, wait
}
}
and then access it in the template from the constructorfield
然后从constructor字段在模板中访问它
<div class="col" *ngIf="state === constructor.State.view"> ... </div>
