Question

我想在自定义管道上调用numberPipe，我找到了这个答案

但我这个解决方案对我不起作用。我有一个错误 “无法找到管道'bigInteger'”

import { Pipe, PipeTransform } from "@angular/core"
import { CurrencyPipe  } from "@angular/common"

@Pipe({
 name: "bigInteger"
 })
 export class BigInteger extends CurrencyPipe implements PipeTransform {
   transform(value: any): string {
    return value
 }
}

Answer 1

<强>更新

至少在Angular4中应该修复一段时间

<强>原始

DI和已扩展其他类的类有一个已知问题

https://github.com/angular/angular/issues/8694

使用此功能已修复，您可以使用合成而不是继承：

@Pipe({
  name: "bigInteger"
})
export class BigInteger implements PipeTransform {

  constructor(private currencyPipe:CurrencyPipe) {}

  transform(value: any): string {
     return this.currencyPipe.transform(value);
  }
}

Answer 2

可能已过时，但这对我有用（ Angular 5 ）：

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

@Pipe({
  name: 'bigInteger'
})
export class BigInteger extends DecimalPipe implements PipeTransform {
  transform(value: any, args?: any): any {

    let result;
    result = super.transform(value, args);

    //any transformations you need

    return result;
  }

}

然后，您就像使用常规的 number 管道一样使用它，但是可以根据需要进行自定义：

<span>{{someValue | bigInteger : '1.2-2'}}</span>

在angular2上的自定义管道上扩展管道，如货币或数字

2 个答案: