我正在学习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;
}
}
我遇到的问题:
非常感谢!
答案 0 :(得分:5)
管道:
@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中的服务。
答案 1 :(得分:1)
你可以使管道不纯净
@Pipe(name: 'tempConvert', pure: false)
export class TemperatureConverterPipe ...
这样每次运行更改检测时都会调用管道。 使用不纯的管道时,您应确保管道不会进行任何昂贵的工作,因为它会经常被调用。