В Angular форматирование валют является распространенным требованием при создании интернационализированных приложений. Валютный канал в Angular предоставляет удобный способ форматирования и отображения значений валюты в соответствии с языковым стандартом пользователя. В этой статье блога мы рассмотрим различные методы использования Currency Pipe в Angular, уделяя особое внимание локали бразильского португальского языка (pt-br). Мы также продемонстрируем, как использовать переменные для динамического форматирования денежных значений, что повышает гибкость вашего приложения.

Метод 1: базовое использование канала валюты
Валютный канал в Angular — это встроенный канал, который можно использовать в выражениях шаблона для форматирования значений валюты. Чтобы использовать его, вы просто применяете канал к значению, которое хотите отформатировать, и указываете желаемую локаль. Вот пример:

<p>{{ price | currency:'BRL':'symbol':'1.2-2':'pt-br' }}</p>

В этом примере price— это переменная, содержащая значение валюты. Труба применяется с ключевым словом currency, за которым следует код валюты (BRLдля бразильского реала), опция символа (symbol), минимальная и максимальная дробные цифры (1.2-2) и локаль (pt-br).

Метод 2: форматирование валюты с помощью переменной
Чтобы отформатировать валюту с помощью переменной, вы можете создать функцию в своем компоненте и передать значение валюты и желаемый языковой стандарт в качестве параметров. Вот пример:

import { Component } from '@angular/core';
@Component({
  selector: 'app-currency',
  template: `
    <p>{{ formatCurrency(price, 'pt-br') }}</p>
  `
})
export class CurrencyComponent {
  price: number = 1000;
  formatCurrency(value: number, locale: string): string {
    return new Intl.NumberFormat(locale, { style: 'currency', currency: 'BRL' }).format(value);
  }
}

В этом примере функция formatCurrencyпринимает значение priceи желаемую локаль в качестве параметров. Он использует конструктор Intl.NumberFormatдля форматирования значения в виде валюты с использованием указанного языкового стандарта и кода валюты.

Метод 3: пользовательское форматирование валюты с помощью переменной
Если вам нужно применить пользовательские правила форматирования к значениям вашей валюты, вы можете изменить функцию formatCurrency, включив в нее дополнительные параметры. Вот пример:

formatCurrency(value: number, locale: string): string {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: 'BRL',
    minimumFractionDigits: 2,
    maximumFractionDigits: 4,
    useGrouping: false,
  }).format(value);
}

В этом примере мы добавили параметры minimumFractionDigitsи maximumFractionDigitsдля управления количеством десятичных знаков, а также параметр useGroupingдля отключить использование разделителей группировок цифр.

В этой статье мы рассмотрели различные методы использования Currency Pipe в Angular для форматирования значений валюты в локали бразильского португальского языка (pt-br). Мы узнали, как использовать канал непосредственно в выражениях шаблонов и как создавать собственные функции для форматирования денежных средств с помощью переменных, что дает нам больший контроль над процессом форматирования. Применяя эти методы, вы можете обеспечить согласованное и локализованное отображение валюты в ваших приложениях Angular.