Question

My Angular Components往往具有全局状态（或“模式”），因此我正在寻找一种有效编码的方法。我试图做的是：

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

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

这个想法是AbcComponent中的函数可以通过设置 state 属性来驱动模板的操作。例如：

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

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

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

P.S。如果我感兴趣的话，我有几个布尔属性，每个状态一个。例如 modeInit modeView 等。它有效，但它很笨拙，因为每次只有一个 true 。

Answer 1

您可以在类之外定义char s[] = "Hello";枚举，可能在另一个文件中定义：

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;
  ...
}

Answer 2

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

如何在Angular组件中使用枚举

2 个答案: