代码之家 › 专栏 › 技术社区 › baao

设置角度管道的默认参数

angular javascript

baao · 技术社区 · 6 年前

是否有任何方法(除了创建自己的管道,稍后使用Angular)来设置Angular管道的应用程序范围默认值? 我经常用这种货币管

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

我不想总是写所有的参数 :'EUR':'symbol':'0.2-2':'de' 我宁愿把它们放一次 currency .

我在文档中找不到关于这一点的内容-这是可能的,还是我需要自己的默认管道?

3 回复 | 直到 6 年前

mostafa tourad 6 年前

大部分角度管使用现有方法返回其转换值,例如,如果查看 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,
        );
    }
}

现在它工作正常了

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

更多信息

baao 6 年前

因为我认为这是不可能的,所以我用下面的类扩展了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);
  }
}

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

Muhammed Albarmavi 6 年前

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

下面的代码片段演示如何为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

快乐的编码。