如何在 Angular 组件中使用枚举答案

【问题标题】：How to use an enum in an Angular Component如何在 Angular 组件中使用枚举
【发布时间】：2020-05-15 08:26:08
【问题描述】：

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

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

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

有其他方法可以做到这一点吗？

附：如果有什么兴趣，我一直在做的是我有几个 boolean 属性，每个状态一个。例如 modeInit modeView 等。它可以工作，但很笨拙，因为一次应该只有一个 true。

【问题讨论】：

作为这个问题的作者，我对重新打开这个问题不感兴趣，因为它已被标记的答案充分回答。但是，我看不出这是如何“基于意见”的。这是一个真正的问题，它有一个非直观的解决方案。 Typescript模板中枚举的用例不明显，解决方法不是意见。

标签： angular typescript

【解决方案1】：

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

【讨论】：

使用导入的别名可能会更清楚。 import { State as StateEnum } from ... 以便类属性为public State = StateEnum，模板将使用State 而不是StateEnum。
我忘了使用 export 关键字，我没有工作。谢谢
@AdoRen - 如果目标是在模板中使用State，也可以设置public State = State。

【解决方案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;
  }
}

模板.html

<div *ngIf="isView">Oh is view!</div>

【讨论】：

好吧，如果我包装对属性 state 的访问，我不必在单独的文件中声明它并导入它。
是否可以将函数 isView() 移动到枚举声明文件中？那么如何从 HTML 中访问这个方法呢？

【解决方案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>

【讨论】：

什么是constructor？它在工作吗？我有一个错误，没有这样的ng:Identifier