Angular：将字段添加到枚举（如 swift/kotlin）的最佳方式？答案

【问题标题】：Angular: Add fields to an enum (like swift/kotlin) best way?Angular：将字段添加到枚举（如 swift/kotlin）的最佳方式？
【发布时间】：2020-06-15 11:20:20
【问题描述】：

我来自移动世界，我正在为一个项目学习 Angular。

我希望我可以将字段添加到像 swift 或 Kotlin 这样的枚举中，例如在 swift 中：

enum Status: Int {
  case connected = 0, disconnected = 1

  var title: String {
      switch self {
        case .connected:
            return "Connected"
        case .disconnected:
            return "Disconnected"
      }
  }

  var color: UIColor {
    switch self {
      case .connected:
        return .green
      case .disconnected:
        return .red
    }
  }

}

使用：

let status = Status.connected
print(status.title) // Output Connected
print(status.color) // Output green

我尝试在 typescript 中执行此操作，我看到了向我提供管道和命名空间的 2 种可能性

我使用管道方法的解决方案：

export enum Status {
  connected = 0, disconnected = 1
}

@Pipe({name: 'color'})
export class StatusColor implements PipeTransform {

  transform(value: Status): string {
    switch (value) {
      case Status.connected:
        return 'green';
      case Status.disconnected:
        return 'red';
    }
  }

}

@Pipe({name: 'title'})
export class StatusTitle implements PipeTransform {

  transform(value: Status): string {
    switch (value) {
      case Status.connected:
        return 'Connected';
      case Status.disconnected:
        return 'Disconnected';
    }
  }

}

在html中使用：

user.status | color
user.status | title

当我在我的 html 代码中调用它时，这个解决方案对我来说是最漂亮的，但问题是我必须为每个字段创建一个自定义管道并在 app.module 中声明它。因此，如果我有 3、4 个字段，它将使我有很多代码，以及 app.module 中的大量声明。想象一下，我有大约 15 个枚举，.. 那么它仍然是一个好主意/好习惯吗？

我的命名空间方法解决方案：

export enum Status {
    connected = 0, disconnected = 1
}

export namespace Status {

  export function titleOf(state: Status): string {
    switch (state) {
      case Status.disconnected:
        return 'Disconnected';
      case Status.connected:
        return 'Connected';
    }
  }

  export function colorOf(state: State): string {
    switch (state) {
      case Status.disconnected:
        return 'red';
      case Status.connected:
        return 'green';
    }
  }

}

从 html 代码中使用：

Status.titleOf(user.status)
Status.colorOf(user.status)

第二种方法更简单，但不如第一种方法漂亮。

那么做我需要的最好方法是什么？这是一个好习惯吗？我可以为每个可以减少我的代码的转换创建一个带有子名称的管道吗？

【问题讨论】：

为什么不从枚举切换到静态类？
因为枚举我是从服务器0或者1收到的

标签： angular typescript enums

【解决方案1】：

你在管道的正确轨道上。

如果您不想为每个变体创建自定义管道，您可以简单地将参数添加到管道 as described in the Angular docs。然后，我将创建一个枚举作为参数，以避免魔术字符串四处飘荡：

enum StatusType {
  title = 'title',
  color = 'color'
}

然后，在管道本身中，您可以添加基于 StatusType 的 switch 语句并返回所需的值。

使用管道的好处：如果输入没有改变，管道总是给出相同的结果而无需计算，因此您可以获得性能 (https://angular.io/guide/pipes#pipes-and-change-detection)。

【讨论】：