当前位置：首页 > news >正文

Transloco 本地化（L10N）支持：日期、货币和数字格式化全攻略

news 2026/4/25 3:56:22

Transloco 本地化（L10N）支持：日期、货币和数字格式化全攻略

【免费下载链接】transloco🚀 😍 The internationalization (i18n) library for Angular项目地址: https://gitcode.com/gh_mirrors/tr/transloco

Transloco 作为 Angular 生态中强大的国际化（i18n）库，不仅提供翻译功能，还通过 transloco-locale 模块实现了全面的本地化（L10N）支持。本文将详细介绍如何利用 Transloco 轻松处理日期、货币和数字的本地化格式化，让你的 Angular 应用无缝适应全球用户需求。

核心本地化模块与服务

Transloco 的本地化功能主要通过transloco-locale库实现，核心组件包括：

TranslocoLocaleModule：提供本地化功能的根模块，需在应用中导入
TranslocoLocaleService：管理本地化配置和语言切换的核心服务
四大格式化管道：TranslocoCurrencyPipe、TranslocoDatePipe、TranslocoDecimalPipe和TranslocoPercentPipe

这些组件位于项目的libs/transloco-locale/src/lib/目录下，通过模块化设计确保功能的可扩展性和易用性。

快速集成步骤

1. 安装依赖

首先确保项目中已包含 transloco-locale 模块，该模块位于项目的libs/transloco-locale/目录。

2. 导入模块

在你的 Angular 模块中导入TranslocoLocaleModule：

import { TranslocoLocaleModule } from '@ngneat/transloco-locale'; @NgModule({ imports: [ // 其他模块 TranslocoLocaleModule ] }) export class AppModule { }

3. 配置本地化服务

通过TRANSLOCO_LOCALE_CONFIG提供商配置默认本地化设置，位于libs/transloco-locale/src/lib/transloco-locale.config.ts：

providers: [ { provide: TRANSLOCO_LOCALE_CONFIG, useValue: { defaultLocale: 'en-US', fallbackLocale: 'en' } } ]

日期格式化：TranslocoDatePipe

TranslocoDatePipe允许你根据当前语言环境格式化日期，支持多种预设格式和自定义格式。

基本用法

<!-- 显示完整日期 --> {{ today | translocoDate }} <!-- 显示短日期 --> {{ today | translocoDate:'short' }} <!-- 自定义格式 --> {{ today | translocoDate:'yyyy年MM月dd日' }}

格式选项

支持的预设格式包括：short、medium、long、full，也可以通过自定义格式字符串实现个性化展示。该管道实现位于libs/transloco-locale/src/lib/pipes/transloco-date.pipe.ts。

货币格式化：TranslocoCurrencyPipe

TranslocoCurrencyPipe可以根据不同地区显示正确的货币符号和格式。

基本用法

<!-- 默认货币格式 --> {{ price | translocoCurrency:'USD' }} <!-- 指定显示样式 --> {{ price | translocoCurrency:'EUR':'symbol-narrow' }} <!-- 自定义小数位数 --> {{ price | translocoCurrency:'CNY':'symbol':'.2-2' }}

主要参数

货币代码（如 'USD'、'EUR'、'CNY'）
显示样式（'symbol'、'code'、'name'）
数字格式

该实现位于libs/transloco-locale/src/lib/pipes/transloco-currency.pipe.ts。

数字与百分比格式化

TranslocoDecimalPipe

用于格式化普通数字，控制小数位数和千分位分隔符：

<!-- 默认格式 --> {{ number | translocoDecimal }} <!-- 自定义小数位数 --> {{ number | translocoDecimal:'.2-2' }}

实现文件：libs/transloco-locale/src/lib/pipes/transloco-decimal.pipe.ts

TranslocoPercentPipe

专用于百分比格式化：

<!-- 默认百分比 --> {{ rate | translocoPercent }} <!-- 自定义格式 --> {{ rate | translocoPercent:'.1-1' }}

实现文件：libs/transloco-locale/src/lib/pipes/transloco-percent.pipe.ts

动态切换语言环境

通过TranslocoLocaleService可以在运行时动态切换语言环境：

import { TranslocoLocaleService } from '@ngneat/transloco-locale'; constructor(private localeService: TranslocoLocaleService) {} changeLocale(locale: string) { this.localeService.setLocale(locale); }

服务实现位于libs/transloco-locale/src/lib/transloco-locale.service.ts。

实际应用示例

在 transloco-playground 应用的 locale 组件中（apps/transloco-playground/src/app/locale/locale.component.ts），你可以看到完整的本地化实现示例：

import { Component } from '@angular/core'; import { TranslocoLocaleService } from '@ngneat/transloco-locale'; @Component({ selector: 'app-locale', templateUrl: './locale.component.html', styleUrls: ['./locale.component.scss'] }) export class LocaleComponent { today = new Date(); price = 1234.56; number = 1234567.89; rate = 0.75; constructor(private localeService: TranslocoLocaleService) {} setLocale(locale: string) { this.localeService.setLocale(locale); } }

对应的模板文件展示了如何在视图中使用这些管道：

<div class="locale-controls"> <button (click)="setLocale('en-US')">English (US)</button> <button (click)="setLocale('es-ES')">Español</button> <button (click)="setLocale('fr-FR')">Français</button> <button (click)="setLocale('zh-CN')">中文</button> </div> <div class="locale-example"> <h3>日期格式化</h3> <p>{{ today | translocoDate:'full' }}</p> <h3>货币格式化</h3> <p>{{ price | translocoCurrency:'USD' }}</p> <h3>数字格式化</h3> <p>{{ number | translocoDecimal }}</p> <h3>百分比格式化</h3> <p>{{ rate | translocoPercent }}</p> </div>