角2自管

Question

说我创建了一个管道，像这样：

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'; 
    } 
} 

这是然后在组件注射：

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

    constructor(private awesome: AwesomePipe){} 
} 

而且随着使用：

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

在变换函数中失败：

VM8019:1 Uncaught ReferenceError: currency is not defined 

在转换函数中添加调试器show this未定义。

为什么？我该如何解决这个问题？

Answer 1

我想你可以解决这个问题，当你真棒上下文绑定到你的awesome.transform方法，像这样：

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

但实际上它会更好，只是通过在你的自定义组件迷死值当你真的想要显示转换后的值时使用你的管道。通过这种方式，您可以使用此处描述的管道链接：https://angular.io/docs/ts/latest/guide/pipes.html#chaining-pipes