设置角度管道的默认参数

大部分角度 管 使用现有方法返回其转换值,例如,如果查看 currency pipe您将看到它使用两个方法将格式化的numer的字符串值返回到currency, formatCurrency 和 getCurrencySymbol 它们可以在 angular common module 所以我们可以用它们来构建我们自己的版本 货币 管道不需要继承或类似的东西,只需要 货币 管道返回的返回值 格式货币 函数并使用传递给管道的参数调用它,并使用 获取货币符号 获取指定的 货币代码

所以现在我们可以用指定的默认值构建自己的版本

 import { Pipe, PipeTransform } from '@angular/core';
  import { formatCurrency, getCurrencySymbol } from '@angular/common';
@Pipe({
    name: 'mycurrency',
})
export class MycurrencyPipe implements PipeTransform {
    transform(
        value: number,
        currencyCode: string = 'EUR',
        display:
            | 'code'
            | 'symbol'
            | 'symbol-narrow'
            | string
            | boolean = 'symbol',
        digitsInfo: string = '0.2-2',
        locale: string = 'en-US',
    ): string | null {
        return formatCurrency(
          value,
          locale,
          getCurrencySymbol(currencyCode, 'wide'),
          currencyCode,
          digitsInfo,
        );
    }
}

现在它工作正常了

注意这里我用的是 恩努斯 如果需要使用其他区域设置,例如 判定元件 你需要导入并注册,

更多信息

angular pipes

CurrencyPipe

格式货币

getCurrencySymnol

angular common

因为我认为这是不可能的,所以我用下面的类扩展了Angular的currencyPipe类,在 transform

@Pipe({
  name: 'deCurrency'
})
export class DeCurrencyPipe extends CurrencyPipe implements PipeTransform {
  transform(value: number, currencyCode: string = 'EUR', display: 'code' | 'symbol' | 'symbol-narrow' | string | boolean = 'symbol', digitsInfo: string = '0.2-2', locale: string = 'de'): string | null {
    return super.transform(value, currencyCode, display, digitsInfo, locale);
  }
}

我仍然非常开放的建议设置默认值,而不写我自己的…

您需要实现一个称为代理管道的东西。

下面的代码片段演示如何为angulars实现代理 CurrencyPipe :

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


@Pipe({
  name: 'currency'
})
export class CurrencyProxyPipe implements PipeTransform {
  currencyPipe = new CurrencyPipe('en')

  transform(value,code = 'EUR',display = 'symbol',digites = '0.3-5',local ='en') {
     return this.currencyPipe.transform(value,code,display,digites,local)
  }

}

如果查看结果,您会发现它以某种方式调用了带有默认参数的currency。

{{ price | currency }}  // €100.000
{{ price | currency:'EUR':'symbol':'0.3-5' }} // €100.000

它看起来与extend currency管道类似,但我在为角管道设置默认参数时使用的这个解决方案。

stackblitz example

快乐的编码。