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

我来自移动世界，我正在为一个项目学习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中实现这一点，我看到了管道和名称空间为我提供的两种可能性

我的管道法解决方案：

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

}

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中使用：

user.status | color
user.status | title

当我在html代码中调用它时，这个解决方案对我来说是最漂亮的，但问题是，对于每个字段，我必须创建一个自定义管道并在app.module中声明它。因此，如果我有3，4个字段，它将使我在app.module中有很多代码和声明。假设我有大约十五个枚举。。那么，这仍然是一个好主意/好做法吗

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

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

}

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)

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

---

那么，做我需要的事情的最佳方法是什么？这是一种好的做法吗？我是否可以为每个转换创建一个具有子名称的管道，以减少代码量？

使用管道的方法是正确的

如果不想为每个变体创建自定义管道，只需向管道添加参数即可。然后，我将创建一个enum用作参数，以避免魔法字符串四处浮动：

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

然后，在管道本身中，可以根据StatusType添加一个switch语句并返回所需的值

---

使用管道的好处：如果输入没有改变，管道总是在不进行计算的情况下给出相同的结果，因此您可以获得性能（）。

为什么不从enum切换到静态类？因为enum I从服务器0或1接收到它