Angular 2 benutzerdefinierte Rohr mit Dependency Injection

Question

Say I ein Rohr wie so zu erstellen:

import { Pipe, PipeTransform } from '@angular/core'; 
import { CurrencyPipe } from '@angular/common'; 
@Pipe({ 
    name: 'awesomePipe' 
}) 
export class AwesomePipe implements PipeTransform { 
    constructor(private currency: CurrencyPipe){} 

    transform(value: number) { 
    return this.currency 
     .transform(value.toString(), 'USD', true) 
     .substring(0, 3) + 'bajillion dollars'; 
    } 
} 

Dieses wird dann in einer Komponente injiziert:

import { AwesomePipe } from '../pipes/awesome.pipe'; 
...... 
...... 
export class Awesome { 
    awesomeness:[number] = [123123123123,32131231235,56465434565]; 

    constructor(private awesome: AwesomePipe){} 
} 

und wird verwendet mit:

template: ` 
<div class="foo"> 
    <custom-component 
    [displayValues]="awesomeness.map(awesome.transform)" 
    ></custom-component> 
</div> 
`, 

Das schlägt in der Transformationsfunktion mit:

VM8019:1 Uncaught ReferenceError: currency is not defined 

Das Hinzufügen eines Debuggers in der Transformationsfunktion zeigt this als undefiniert an.

Warum? Und wie kann ich das beheben?

Answer 1

Ich denke, Sie können dieses Problem beheben, wenn Sie den awesome-Kontext zu Ihrer awesome.transform Methode, wie so binden:

template: ` 
<div class="foo"> 
    <custom-component 
    [displayValues]="awesomeness.map(awesome.transform.bind(awesome))" 
    ></custom-component> 
</div> 
`, 

aber eigentlich wäre es besser, nur die awesomeness Werte in Ihrer benutzerdefinierten Komponente zu übergeben und Verwenden Ihrer Pipes, wenn Sie die transformierten Werte tatsächlich anzeigen möchten. Auf diese Weise können Sie die hier beschriebene Rohrverkettung verwenden: https://angular.io/docs/ts/latest/guide/pipes.html#chaining-pipes