我的Angular 组件往往有一个全局状态(或"模式"),所以我正在寻找一种有效的编码方法.我想做的是:

@Component({
      ....
})
export class AbcComponent implements OnInit {

  enum State {
    init, view, edit, create, wait
  }
  state: State = State.init;

其思想是,只需设置state属性,AbcComponent中的函数就可以驱动模板的操作.例如:

<div class="col" *ngIf="state === State.view"> ... </div>

问题是enum定义不能出现在class struct 中.然后如果我把它移到class struct 之外,那么模板就不在它的局部范围内.

有不同的方法吗?

另外,如果有任何兴趣的话,我一直在做的是,我有boolean个属性,每个州一个.例如modeInit modeView等.它可以工作,但很笨拙,因为一次只能有一个是true.

推荐答案

您可以在类之外(可能在另一个文件中)定义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>

Typescript相关问答推荐

如何使用Generics保留构造函数的类型信息?

TypeScript泛型参数抛出错误—?&#"' 39;预期"

Angular中的其他服务仅获取默认值

扩展函数签名中的参数类型,而不使用泛型

泛型函数即使没有提供类型

为什么TypeScript假设文档对象始终可用?

使用`renderToPipeableStream`时如何正确恢复服务器端Apollo缓存?

是否使用非显式名称隔离在对象属性上声明的接口的内部类型?

是否可以针对联合类型验证类型属性名称?

Angular文件上传到Spring Boot失败,多部分边界拒绝

使用KeyOf和Never的循环引用

如果数组使用Reaction-Hook-Form更改,则重新呈现表单

在类型脚本中创建泛型类型以动态追加属性后缀

在Reaction中折叠手风琴

如何正确地将元组表格输入到对象数组实用函数(如ZIP)中,避免在TypeScrip 5.2.2中合并所有值

如何在Deno中获取Base64图像的宽/高?

可以用任意类型实例化,该类型可能与

如何在Vue动态类的上下文中解释错误TS2345?

如何使用IsEqual创建断言类型相等的实用程序

错误:仅允许在‘使用服务器’文件中导出异步函数