NG-ZORRO国际化配置完全指南

富茉钰Ida

于 2025-06-04 09:20:13 发布

阅读量310

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01091/article/details/148419289

NG-ZORRO国际化配置完全指南

ng-zorro-antd Angular UI Component Library based on Ant Design 项目地址: https://gitcode.com/gh_mirrors/ng/ng-zorro-antd

前言

NG-ZORRO作为基于Angular的企业级UI组件库，国际化支持是其核心功能之一。本文将全面介绍如何在NG-ZORRO项目中实现多语言支持，包括静态配置、动态切换以及日期格式化的特殊处理。

国际化基础配置

NG-ZORRO默认使用中文语言包，但可以通过简单的配置切换为其他语言。国际化配置主要涉及两个核心概念：

NZ_I18N：用于配置组件的国际化文本
NZ_DATE_CONFIG：用于配置日期相关特性

基本配置示例

// 导入Angular语言包
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

// 配置NG-ZORRO国际化
import { provideNzI18n, en_US } from 'ng-zorro-antd/i18n';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNzI18n(en_US)  // 使用英文语言包
  ]
}

与Angular本地化集成

NG-ZORRO可以与Angular的本地化方案无缝集成，实现自动语言切换：

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import zh from '@angular/common/locales/zh';
registerLocaleData(en);
registerLocaleData(zh);

import { en_US, NZ_I18N, zh_CN } from 'ng-zorro-antd/i18n';

export const appConfig: ApplicationConfig = {
  providers: [{
    provide: NZ_I18N,
    useFactory: () => {
      const localId = inject(LOCALE_ID);
      switch (localId) {
        case 'en': return en_US;
        case 'zh': return zh_CN;
        default: return en_US;
      }
    }
  }]
}

这种配置方式特别适合需要支持多语言的Angular应用，可以根据用户的语言偏好自动切换UI语言。

运行时语言切换

NG-ZORRO提供了NzI18nService服务，支持在应用运行时动态切换语言：

import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';

class LanguageSwitcher {
  private i18n = inject(NzI18nService);

  switchToEnglish() {
    this.i18n.setLocale(en_US);
  }
}

这种动态切换能力对于需要让用户自行选择界面语言的场景非常有用。

日期格式化方案

NG-ZORRO提供了两种日期格式化方案：

1. Angular原生方案

默认使用Angular的DatePipe进行日期格式化，需要引入对应的Angular语言包。这种方式简单直接，但存在周数计算不符合ISO标准的问题。

2. date-fns方案

作为替代方案，NG-ZORRO支持使用date-fns库进行更标准的日期格式化：

// 配置date-fns语言包
import { enUS, ja } from 'date-fns/locale';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: NZ_DATE_LOCALE, useValue: enUS }
  ]
}

// 运行时切换
class DateLocaleSwitcher {
  private i18n = inject(NzI18nService);

  switchToJapanese() {
    this.i18n.setDateLocale(ja);
  }
}

使用date-fns方案可以获得更准确的国际化日期显示，特别是对于周数的计算。

日期全局配置

通过NZ_DATE_CONFIG可以自定义日期相关特性：

{
  firstDayOfWeek: 1  // 设置周一为一周的第一天
}

自定义语言包

NG-ZORRO允许对现有语言包进行扩展或修改：

const customLanguagePack = {
  ...en_US,
  Pagination: {
    items_per_page: "records per page"
  }
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideNzI18n(customLanguagePack)
  ]
}

这种灵活性使得开发者可以根据项目需求微调UI文本。