文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载本指南以 developer-roadmap 仓库中 Angular 学习路线图roadmaps/angular的 i18n 主题为骨架深入讲解 Angular 国际化Internationalization简称 i18n的核心基础——Unicode 地区标识符Unicode Locale ID即 Locale ID。你将掌握 Locale ID 的构成语法、Angular 默认源语言环境en-US的定位、如何在项目中注册与切换地区数据以及它与angular/localize、extract-i18n和多语言部署等配套能力的协作关系从而为构建真正面向全球用户的多语言 Angular 应用打好地基。Locale ID 是什么Angular 国际化的寻址体系在 locales-by-iddVKl3Z2Rnf6IB064v19Mi.md 这一节中Angular 学习路线给出了一个精确定义Angular 使用 Unicode 地区标识符Unicode Locale ID来查找正确的地区数据用于文本字符串的国际化处理。这句话包含三层含义Locale ID 是地址Angular 内置的大量地区数据日期格式、数字格式、货币符号、复数规则等不是按国家名索引的而是按 Locale ID 这个标准化字符串索引的。告诉 Angular 一个 Locale ID它就能从内置的 locale 数据集中找到对应的格式化规则。Locale ID 服务于文本这里强调的文本字符串指日期、数字、货币等需要按地区习惯呈现的文本与模板中通过i18n标记翻译的界面文案是两个层面但共享同一套 Locale ID 体系。Locale ID 有明确的默认值默认情况下Angular 使用en-US作为项目的源语言环境source locale。这意味着你的项目在未做任何配置时日期、数字、货币都以美式英语的规则呈现。在 developer-roadmap 的 Angular 路线中这一节与 internationalizationXxyx3uzy5TpNhgR1IysMN.md、multiple-locales9ISvaaJ815_cr_KW9vQhT.md、translation-filesjL5amGV1BAX_V5cyTIH7d.md 等小节共同构成完整的 i18n 学习闭环先理解 Locale ID 寻址再配置多语言环境最后通过翻译文件落地。Locale ID 的构成语法语言、地区与可选扩展根据原文档的定义一个完整的 Locale ID 由三部分构成一个地区标识符由语言标识符language identifier、一个连字符-以及地区扩展locale extension组成。语言标识符用于指定语言、国家以及可选的用于进一步区分变体或细分地区的代码。用结构化的方式表达即language [-script] [-region] [-variant...] [-extension...]以zh-Hans-CN为例片段值含义languagezh语言代码ISO 639scriptHans可选文字系统代码ISO 15924如简体中文regionCN可选国家/地区代码ISO 3166如中国Angular 使用的正是 Unicode CLDRCommon Locale Data Repository定义的这一套标准它同时与 BCP 47 语言标签规范兼容。该规范的制定参考了 Unicode CLDR 规范与 ISO 639-2 语言代码表原文档中亦引用了这两份外部权威标准作为延伸阅读。常见 Locale ID 示例en-US英语美国Angular 的默认源语言环境en-GB英语英国日期格式与美式差异明显如dd/MM/yyyy与MM/dd/yyyyfr-CA法语加拿大同一语言在不同地区的数字与货币格式也可能不同zh-Hans简体中文不带地区限定可覆盖中国大陆、新加坡等多个地区zh-Hant-TW繁体中文中国台湾地区。理解语言 地区的组合至关重要同一语言的数字、日期、货币规则可能因地区而异。例如fr-FR使用空格作为千位分隔符而fr-CA使用逗号这正是 multiple-locales9ISvaaJ815_cr_KW9vQhT.md 小节所强调的为每个目标地区定义日期格式、货币符号、数字表示等特定 locale 数据的原因。默认源语言环境en-US与项目中的实际作用原文档明确指出默认情况下Angular 使用en-US作为项目的源语言环境。这带来两个直接影响未配置即用美式规则若项目未做任何 i18n 配置Angular 应用中的DatePipe、CurrencyPipe、DecimalPipe等管道将全部按照en-US规则格式化输出。源语言文件以en-US为基准在后续使用extract-i18n提取翻译标记时生成的是以源语言环境为对照的翻译源文件。通过 LOCALE_ID 令牌切换应用级语言环境在实际项目中通常通过 Angular 依赖注入令牌LOCALE_ID来声明当前应用使用的 Localeimport { LOCALE_ID, NgModule } from angular/core; NgModule({ providers: [{ provide: LOCALE_ID, useValue: zh-Hans }], }) export class AppModule {}仅声明LOCALE_ID还不够——Angular 默认只打包en-US的地区数据要使用其他语言环境的格式化规则必须显式导入并注册对应的 locale 数据import { registerLocaleData } from angular/common; import localeZhHans from angular/common/locales/zh-Hans; registerLocaleData(localeZhHans);registerLocaleData的作用是把目标地区的日期、数字、货币等 CLDR 数据注入当前运行时之后DatePipe、CurrencyPipe等才会按新 locale 规则输出。在 angular.json 中配置多语言构建对于需要同时产出多个语言版本的项目可以在angular.json的构建配置中声明 locale 映射{ projects: { my-app: { i18n: { sourceLocale: en-US, locales: { fr: { translation: src/locale/messages.fr.xlf }, zh-Hans: { translation: src/locale/messages.zh-Hans.xlf } } } } } }sourceLocale明确声明源语言环境默认即en-USlocales中每个键即为一个目标 Locale ID其值指向对应的翻译文件。这正好呼应了 translation-filesjL5amGV1BAX_V5cyTIH7d.md 小节的说明当项目有多个语言文件时需要把 locale 加进文件名例如messages.{locale}.xlf如messages.fr.xlf、messages.zh-Hans.xlf。从 Locale ID 到翻译文件完整的 i18n 工作流Locale ID 只是寻址基础要真正落地多语言需要与路线图中其余 i18n 小节协作形成完整流水线1. 安装angular/localizelocalize-packageW8OwpEw00xn0GxidlJjdc.md 指出使用 Angular CLI 将angular/localize添加到项目后才能启用本地化特性。如果未安装该包却尝试构建本地化版本例如在模板中使用了 i18n 属性Angular CLI 会生成包含启用 i18n 操作步骤的错误提示。ng add angular/localize2. 在模板中标记可翻译文本h1 i18nhomepageTitleWelcome to our application/h1 p i18nThis text will be extracted for translation./pi18n属性即标记此文本需要翻译homepageTitle为可选的翻译键Translation ID。3. 提取翻译源文件根据 translation-filesjL5amGV1BAX_V5cyTIH7d.md 的说明组件准备就绪后使用 Angular CLI 的extract-i18n命令提取被标记的文本包括带i18n标记的文本、带i18n-前缀标记的属性以及用$localize标记的代码内文本生成名为messages.xlf的源语言文件ng extract-i18n该命令会在项目根目录生成messages.xlf若存在多个语言文件则按messages.{locale}.xlf的规则命名。4. 构建多语言版本ng build --localize--localize会根据angular.json中声明的每个 Locale ID 分别产出对应语言的构建版本——每个 Locale ID 都会成为目标产物的一部分这正是 multiple-locales9ISvaaJ815_cr_KW9vQhT.md 所描述的为每个目标地区定义特定 locale 数据使应用动态切换界面、让内容与数据格式符合不同地区用户的文化预期的最终形态。寻找与验证 Locale ID 的可靠来源在实际开发中如何确认某个 Locale ID 是 Angular 支持的合法标识符可以依据以下事实源Angular 官方 locale 数据目录Angular 的 locale 数据以angular/common/locales/下的文件形式存在每个文件的命名即对应一个 Locale ID如fr、fr-CA、zh-Hans这是判断 ID 是否可注册的最直接依据Unicode CLDR 规范Locale ID 的语法与可用语言、地区代码遵循 Unicode CLDR 标准ISO 639-2 语言代码表用于确认语言代码段的合法性如en、zh、fr。常见误区与注意事项LOCALE_ID不等于自动加载地区数据仅注入LOCALE_ID而不调用registerLocaleData非默认地区的日期/数字/货币格式不会生效这是最常见的 i18n 配置遗漏。地区代码不区分大小写但需规范书写BCP 47 规定语言用小写、地区用大写、文字系统用首字母大写如zh-Hans-CN保持规范书写便于与 CLDR 数据一一对应。en-US之外的源语言环境可以自定义angular.json的sourceLocale允许你将源语言环境改为任意合法 Locale ID不必局限于默认值。小结在 developer-roadmap 的 Angular 学习路线中Locales by ID 是 i18n 主题的起点一个由语言标识符、连字符与地区扩展构成的 Unicode Locale ID决定了 Angular 以何种规则呈现日期、数字与货币en-US则是项目的默认源语言环境。在此基础上配合LOCALE_ID注入、registerLocaleData注册地区数据、ng add angular/localize、ng extract-i18n与ng build --localize即可构建出覆盖全球用户的多语言 Angular 应用。深入学习可继续阅读仓库中同一路线的 internationalization、multiple-locales 与 translation-files 等关联章节。赞分享文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载相关推荐developer-roadmap Angular 路线之 Multiple Locales多语言环境配置、构建与部署实战指南developer roadmap Angular 路线之 Multiple Locales多语言环境配置、构建与部署实战指南 Multiple Locale文档教程知识库CRCT项目实战从零开始构建企业级代码依赖管理系统CRCT项目实战从零开始构建企业级代码依赖管理系统 Cline Recursive Chain of Thought System CRCT 是一款专为VSdeveloper-roadmap Angular 路线图实战掌握 if 内置控制流块的 DOM 条件渲染developer roadmap Angular 路线图实战掌握 if 内置控制流块的 DOM 条件渲染 Angular 内置控制流Built in C文档教程知识库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考