如何在点后设置数字和货币符号的样式？

Question

我已经使用角 currency 管道在逗号后显示数字。

<ion-label class="accordion_balance">{{balance | currency:'KZT':'symbol-narrow':'1.2-2'}}</ion-label>

结果：

我需要在逗号后减小数字和货币符号，如下所示：

Answer 1

恐怕您必须分别设置数字和货币符号的样式。角管仅返回字符串，无法设置字符串中各个字符的样式。

好消息是，您可以链接定制的管道以将字符串分成多个部分。例如，管道将35 000,00T分为35 000和00T。然后分别应用不同的样式：

<ion-label class="accordion_balance">
    <ng-container *ngIf="let currencyValues = balance | currency:'KZT':'symbol-narrow':'1.2-2' | yourCustomisedPipe"
        <span class="currency_large_number">{{currencyValues[0]}}</span> <!--35 000,-->
        <span class="currency_small_number">{{currencyValues[1]}}</span> <!--00T-->
    </ng-container>
</ion-label>

Answer 2

使用html中的管道currency无法实现这一目标。

但是有解决方案：

您可以创建自己的指令或组件来完成这项工作。

您可以使用：

const money = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'KZT' }).format(35000))

然后，将money拆分为35000，00和₸

如果您使用的是组件，则可能会有类似的内容：

<span class="money">
   {{unit}}, 
   <span class="digit">{{digit}}</span>
   &nbsp
   <span class="currency">{{currency}}</span>
</span>