Angular内置CurrencyPipe疑问：能否无需传入数字仅显示货币符号？

嘿，我来帮你理清楚这个问题：默认的CurrencyPipe确实不支持把数字参数设为可选来单独显示货币符号。它的设计初衷就是用来格式化数值成符合区域设置的货币格式，所以数字输入是必填项——要是不传数字，管道要么返回空字符串，要么直接报错（取决于你用的Angular版本）。

不过别担心，有两种简单的办法能实现你想要的效果：

方案1：自定义管道封装原生CurrencyPipe #

你可以自己写个小管道，内部复用CurrencyPipe，当没传数字的时候自动给个默认值（比如0），然后把数值部分去掉只留符号：

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

@Pipe({
  name: 'currencySymbol'
})
export class CurrencySymbolPipe implements PipeTransform {
  constructor(private currencyPipe: CurrencyPipe) {}

  transform(value?: number, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string, digitsInfo?: string, locale?: string): string {
    // 没传数字就用0当默认值
    const targetValue = value ?? 0;
    // 调用原生管道格式化后，把数字、逗号、空格这些都去掉
    return this.currencyPipe.transform(targetValue, currencyCode, 'symbol', digitsInfo, locale)?.replace(/[0-9.,\s]/g, '') || '';
  }
}

用的时候就很简单啦，不用传数字也能显示符号：

<!-- 显示当前区域的默认货币符号 -->
{{ undefined | currencySymbol }}
<!-- 指定货币代码，比如显示欧元符号 -->
{{ undefined | currencySymbol:'EUR' }}

方案2：直接获取区域对应的货币符号 #

如果你只是单纯要显示符号，不需要任何数值格式化，那直接用Angular提供的工具函数更省事。注入LOCALE_ID和getCurrencySymbol就能拿到：

import { Component, Inject, LOCALE_ID } from '@angular/core';
import { getCurrencySymbol } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `当前区域的货币符号：{{ currencySymbol }}`
})
export class AppComponent {
  currencySymbol: string;

  constructor(@Inject(LOCALE_ID) private locale: string) {
    // 获取当前区域的货币符号，'wide'表示显示完整符号（比如$而不是US$）
    this.currencySymbol = getCurrencySymbol(this.locale, 'wide');
    // 要是想指定特定货币，比如美元：
    // this.currencySymbol = getCurrencySymbol('USD', 'wide', this.locale);
  }
}

这种方式更轻量，适合只需要展示符号的场景。

总的来说，默认CurrencyPipe必须传数字，但通过上面两种方法，完全能实现你要的仅显示货币符号的需求～

内容的提问来源于stack exchange，提问作者David Casanellas