angular - 实现一个简单的单位转换器

Question

我是 Angular 的新手，所以请原谅我的新手问题 :) 我正在创建一个小项目来显示一些运动训练数据。我需要为速度、距离等单位实现一个简单的转换器。现在，我创建了一个管道来计算值并添加正确的单位。我已经声明了变量来确定要使用的单位。它看起来像这样：

let speedUnit = 'kmh';

switch (args) {
  case 'speed': {
    if (speedUnit == 'kmh') {

      newValue = value * 3.6;
      newValue = newValue.toFixed(2);
      newValue += ' km/h';
    }
    if (speedUnit == 'mph') {
      newValue = value * 2.23694;
      newValue = newValue.toFixed(2);
      newValue += ' mph';
    }
    break;
  }

到目前为止效果很好。问题是，我需要它更动态，所以我可以通过点击切换单位。例如，前端会有一个开关，上面有 mph/kmh，单击它会将speedUnit变量的值从“kmh”更改为“mph”，并更新屏幕上的数据。

这里最好的方法是什么？使用某种服务？可观察的？正如我所提到的，我是 Angular 的新手，我还不熟悉它的所有组件。:)

谢谢你的帮助。