如何在角度5的纯管道中使用HTTP调用 [英] How to use HTTP calls in pure pipe in angular 5
问题描述
我正在创建将一种货币值转换为另一种货币值的管道.我正在通过HTTP调用来转换值.
I am creating a pipe to convert one currency value to another. I am making HTTP call to convert value.
@Pipe({
name: "currencyConverter"
})
export class CurrencyConverterPipe implements PipeTransform {
transform(value: number, currencyPair: string): number {
let sourceCurrency = currencyPair.split(":")[0];
let destinationCurrency = currencyPair.split(":")[1];
this.currencyConverterService.convert(sourceCurrency, destinationCurrency).subscribe(successData => {
return successData['fiatValue'] * value;
}, errorData => {
console.error(errorData);
})
}
}
在HTML
<p> {{ value | currencyConverter:'BTC:USD'}}</p>
我在UI中看不到任何值.当我使管道不纯
时,它可以工作,但是它对服务器进行了许多HTTP调用.有什么方法可以在不使用 pure:false
在管道中的情况下进行HTTP调用
I am unable to see any value in UI. When i make my pipe impure
, Then it works but it is making many HTTP calls to server. Is there any way to make HTTP call without using pure: false
in pipe
推荐答案
该管道不是纯设计的.
为了不引起多个请求,它应该返回相同的observable,除非更改输入,否则不会再执行其他请求,例如:
In order to not cause multiple requests, it should return same observable that won't do additional requests until input is changed, something like:
@Pipe({
name: "currencyConverter",
pure: false
})
export class CurrencyConverterPipe {
private sourceCurrency;
private destinationCurrency;
private valueSubject = new Subject();
private value$ = this.valueSubject.asObservable().distinctUntilChanged()
.switchMap(value => {
return this.currencyConverter
.convert(sourceCurrency, destinationCurrency))
.map((data) => data * value);
});
constructor(private currencyConverter: ...) {}
transform(value: number, currencyPair: string): number {
this.sourceCurrency = currencyPair.split(":")[0];
this.destinationCurrency = currencyPair.split(":")[1];
this.valueSubject.next(value);
return this.value$;
}
}
由于应该仅将其与 async
管道结合使用,因此将它们连接在一起并扩展 AsyncPipe
:
Since it is supposed to be used only in conjunction with async
pipe, it makes sense to join them together and extend AsyncPipe
:
@Pipe({
name: "currencyConverterAsync",
pure: false
})
export class CurrencyConverterPipe extends AsyncPipe {
private sourceCurrency;
private destinationCurrency;
private valueSubject = new Subject();
private value$ = this.valueSubject.asObservable().distinctUntilChanged()
.switchMap(value => {
return this.currencyConverter
.convert(sourceCurrency, destinationCurrency))
.map((data) => data * value);
});
constructor(cdRef: ChangeDetectorRef, private currencyConverter: ...) {
super(cdRef);
}
transform(value: number, currencyPair: string): number {
this.sourceCurrency = currencyPair.split(":")[0];
this.destinationCurrency = currencyPair.split(":")[1];
this.valueSubject.next(value);
return super.transform(this.value$);
}
}
这篇关于如何在角度5的纯管道中使用HTTP调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!