具有可变参数的角度2管道

发布时间：2020-12-17 17:32:22 所属栏目：安全来源：网络整理

导读：我正在学习Angular2 / Ionic2,所以请原谅我的无知.我学习管道,一切都很容易,直到我偶然发现这个问题.让我用温度的完美例子来证明这个问题. 假设我有管道返回Celisus或Fahrenheit温度值,具体取决于localStorage上保存的设置(摄氏度是默认输入值). 所以我创建

我正在学习Angular2 / Ionic2,所以请原谅我的无知.我学习管道,一切都很容易,直到我偶然发现这个问题.让我用温度的完美例子来证明这个问题.

假设我有管道返回Celisus或Fahrenheit温度值,具体取决于localStorage上保存的设置(摄氏度是默认输入值).

所以我创建了一个管道来执行此操作：

export class TemperatureConverterPipe implements PipeTransform {

  // Selected temperature unit
  private unit: string;

  constructor(private settings: Settings){
    // Get immediately the temperature unit from localStorage
    // And subscribe to changes
    this.settings.radio().subscribe(data => {
      this.unit = data.temp_unit
    });
  }

  // Return temperature
  transform(value: number): number {
    switch(this.unit){
      case "c":
        return value;
        break;
      case "f":
        return celsiusToFahrenheit(value);
        break;
      default:
       return value;
    }
  }

  // Convert celsius temp to fahrenheit
  celsiusToFahrenheit(value: number){
     return value * 9/5 + 32;
  }

}

我遇到的问题：

>该管道如何监视参数更改(温度单位)并返回新值(e.q. C到F)？因为目前它只监视输入(温度值)的变化.
>这是解决这个问题的正确方法吗？

非常感谢你！

解决方法

管：

@Pipe(name: 'tempConverter')
 export class TemperatureConverterPipe implements PipeTransform {

      // Selected temperature unit
      //private unit: string;

      constructor(){

      }

      // Return temperature
      transform(value: number,unit:string): number {
        switch(unit){
          case "c":
            return value;
            break;
          case "f":
            return celsiusToFahrenheit(value);
            break;
          default:
           return value;
        }
      }

      // Convert celsius temp to fahrenheit
      celsiusToFahrenheit(value: number){
         return value * 9/5 + 32;
      }

    }

HTML调用：

[temperatureProperty]="value | tempConverter:unit"

订阅调用组件和传递单元的ngOninit中的服务.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!