我正在学习 Angular2/Ionic2,所以请原谅我的无知。我开始学习 Pipes,在我偶然发现这个问题之前,一切似乎都很容易。让我用一个完美的温度示例来演示这个问题。
假设我有管道返回摄氏或华氏温度值,具体取决于保存在 localStorage 上的设置(摄氏是默认输入值)。
所以我创建了一个 Pipe 来执行此操作:
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;
}
}
我遇到的问题:
- 该管道如何观察参数变化(温度单位)并返回新值(例如 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中订阅服务并传递单元。
关于具有可变参数的 Angular 2 管道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41503578/