Angular 2 个带有依赖注入的自定义管道
Angular 2 custom pipe with Dependency Injection
假设我像这样创建了一个管道:
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
在转换函数中添加调试器显示 this
未定义。
为什么?我该如何解决这个问题?
我猜你可以在将 awesome-context 绑定到你的 awesome.transform 方法时解决这个问题,如下所示:
template: `
<div class="foo">
<custom-component
[displayValues]="awesomeness.map(awesome.transform.bind(awesome))"
></custom-component>
</div>
`,
但实际上,当您真正想要显示转换后的值时,最好只在您的自定义组件中传递 awesomeness 值并使用您的管道。这样您就可以使用此处描述的管道链接:https://angular.io/docs/ts/latest/guide/pipes.html#chaining-pipes
假设我像这样创建了一个管道:
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
在转换函数中添加调试器显示 this
未定义。
为什么?我该如何解决这个问题?
我猜你可以在将 awesome-context 绑定到你的 awesome.transform 方法时解决这个问题,如下所示:
template: `
<div class="foo">
<custom-component
[displayValues]="awesomeness.map(awesome.transform.bind(awesome))"
></custom-component>
</div>
`,
但实际上,当您真正想要显示转换后的值时,最好只在您的自定义组件中传递 awesomeness 值并使用您的管道。这样您就可以使用此处描述的管道链接:https://angular.io/docs/ts/latest/guide/pipes.html#chaining-pipes