我正在学习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)?因为目前它只监视输入(温度值)的变化.
>这是解决这个问题的正确方法吗?
非常感谢你!
@R_301_323@
管:
@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"