如何在角分量中使用枚举
如何在角分量中使用枚举
提问于 2018-03-04 03:47:26
我的角度组件倾向于有一个全局状态(或“模式”)，所以我正在寻找一种有效编码的方法。我想做的是：
@Component({
....
})
export class AbcComponent implements OnInit {
enum State {
init, view, edit, create, wait
}
state: State = State.init;其思想是，AbcComponent中的函数可以通过设置状态属性来驱动模板的操作。例如：
<div class="col" *ngIf="state === State.view"> ... </div>问题是枚举定义不能出现在类结构中。然后，如果我将它移到类结构之外，那么模板就不会在其本地范围内。
有什么不同的方法吗？
如果有兴趣的话，我有几个布尔属性，每个状态一个。例如，、modeInit、、、modeView、等。它可以工作，但很笨拙，因为一次只有一个是真正的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-04 04:07:09
您可以在类之外定义State枚举，可能在另一个文件中：
export enum State {
init,
view,
edit,
create,
wait
}并将枚举分配给类中的公共字段：
import { State } from "../models/app-enums.model";
@Component({
....
})
export class AbcComponent implements OnInit {
public StateEnum = State;
public state = State.init;
...
}然后，可以使用该公共字段来引用模板中的枚举：
<div class="col" *ngIf="state === StateEnum.view"> ... </div>Stack Overflow用户
发布于 2018-03-04 04:34:08
可以定义方法或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
<div *ngIf="isView">Oh is view!</div>Stack Overflow用户
发布于 2018-03-04 10:16:42
还可以使用声明合并使枚举作为组件的静态成员可用。
@Component({
....
})
export class AbcComponent implements OnInit {
state = AbcComponent.State.init;
}
export namespace AbcComponent {
export enum State {
init, view, edit, create, wait
}
}然后从constructor字段在模板中访问它。
<div class="col" *ngIf="state === constructor.State.view"> ... </div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49091786
复制相关文章
相似问题
腾讯云开发者
