Question

有没有办法（除了创建我自己的管道，以后使用angular＆＃39; s）为角度管道设置应用程序范围的默认值？我像这样广泛使用货币管道

{{ price | currency:'EUR':'symbol':'0.2-2':'de' }}

我不想总是写出所有参数:'EUR':'symbol':'0.2-2':'de'，而是希望为currency的所有用法设置一次。{1}}。

我在文档中找不到相关内容 - 是可能的还是我需要自己的默认管道？

Answer 1

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

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

 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,
        );
    }
}

现在它的工作完美

请注意，如果您需要使用其他语言环境，例如 de ，我需要使用 en-US 作为语言环境，您需要将其导入并注册，

更多信息

Answer 2

由于我认为不可能，我使用transform

中的默认参数扩展了角度类型的CurrencyPipe类以下类

@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);
  }
}

我仍然非常愿意接受有关设置默认值的建议，而无需编写自己的...

Answer 3

向您的提供商注入DEFAULT_CURRENCY_CODE很简单

import { DEFAULT_CURRENCY_CODE,  } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
registerLocaleData(localeDe, localeDeExtra);
@NgModule({
providers: [
  {
   provide: LOCALE_ID,
   useValue: 'de'
  },
  {
    provide: DEFAULT_CURRENCY_CODE,
    useValue: 'EUR'
  }    
 ]
 })

Answer 4

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

以下代码段演示了如何为Angular 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)
  }

}

如果查看结果，您会发现它以某种方式使用默认参数调用货币。

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

它看起来与扩展货币管道类似，但这个解决方案我用于角管道的默认参数设置。

stackblitz example

快乐编码。

设置角度管道的默认参数

4 个答案: