如何在Angular组件中使用枚举[关闭]

Question

我的Angular组件往往具有全局状态（或“模式”），所以我正在寻找一种有效编码的方法。我试图做的是这样的：

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

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

我们的想法是，A Component中的函数可以通过设置state属性来驱动模板的操作。例如：

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

问题是枚举定义不能出现在类结构中。然后，如果我将它移到类结构之外，那么模板在其本地范围内没有它。

有没有正确/更好的方法来做到这一点？

附：如果我感兴趣的是我一直在做的是我有几个布尔属性，每个状态一个。例如modeInit modeView等它可以工作，但它很笨拙，因为一次只能有一个是真的。

Answer 1

您可以定义方法或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>

Answer 2

您可以在类之外定义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>

Answer 3

您还可以使用声明合并来使枚举可用作组件的静态成员。

@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>