Angular 2 - 在管道內調用服務

Question

有一種方法可以在管道內注入和調用服務？我有一個貨幣服務，我想用它來獲取基於id的名稱。 謝謝！

這是我的代碼：

@Pipe({name: 'currencypipe', pure: false}) 
export class CurrencyPipe implements PipeTransform { 
    symbol: string = null; 

    constructor(private currencyService: CurrencyService) { 

    } 

    transform(value: number, currencyId: number): Promise<String> { 
     return this.currencyService.getCurrencie(currencyId).then(response => { 
       return (value + " " + response.symbol); 
      } 
     ); 
    } 
} 

我用它這樣

{{3 | currencypipe: 2 | async}} 

Answer 1

就像你在任何部件做你可能注入的服務管道，

@Pipe({ 
    name: 'my-currency-pipe' 
}) 
export class MyCurrencyPipe implements PipeTransform { 
    constructor(service: SomeService) { 

    } 

    transform(value: string): string { 
     return value; 
    } 
} 

然而您也可以在管道中使用參數。 Read more here.

更新

excerpts from Pipe documentation搜索不純緩存管，

讓我們寫一個更不純的管道，使一個HTTP請求到 服務器的管道。通常情況下，這是一個可怕的想法。不管我們做什麼，這可能都是一個可怕的想法。無論如何，我們正在努力爭取一分。請記住，每隔幾微秒就會調用不純的管道。如果我們是 不小心，這個管道將懲罰與請求的服務器。

記住上面保持一致，你可以做以下爲您的方案獲得異步結果，

import { Component, PipeTransform, Pipe } from '@angular/core'; 

export class CurrencyService { 
    getCurrencie(currencyId):Promise<string> { 
    return new Promise<any>((resolve, reject) => { 
     setTimeout(() => { 
     if(currencyId === 1){ 
      resolve({symbol : '$'}); 
     }else{ 
      resolve({symbol: '£'}); 
     } 
     }, 1000) 
    }) 
    } 
} 

@Pipe({name: 'currencypipe', pure: false}) 
export class CurrencyPipe implements PipeTransform { 
    symbol: string = null; 
    prevalue: string = null; 
    result: string = ''; 

    constructor(private currencyService: CurrencyService) { 
    } 

    transform(value: number, currencyId: number) { 
     if (value !== this.prevalue) { 
     this.prevalue = value; 
     this.result = ''; 

     this.currencyService.getCurrencie(currencyId).then(response => {     
       this.result = value + " " + response.symbol; 
      } 
     ); 
     } 
     return this.result; 
    } 
} 


@Component({ 
    selector: 'my-app', 
    template: `<h1>Currency Pipe</h1> 
    <hr /> 
    {{3 | currencypipe: 1 }} 
    ` 
}) 
export class AppComponent { } 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent, CurrencyPipe ], 
    providers: [ CurrencyService ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

這裏是Plunker！

希望這有助於！