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

【angular】实现简单的angular国际化(i18n)

news 2026/5/20 6:32:08

文章目录

    • 目标
    • 过程
    • 运行
    • 在TS中国际化
    • 参考

目标

实现简单的angular国际化。本博客实现中文版和法语版。

将Hello i18n!变为中文版：你好 i18n!或法语版:Bonjour l’i18n !。

在这里插入图片描述

过程

创建一个项目：

ng new i18nDemo

在集成终端中打开。

添加本地化包：

ng add @angular/localize

在html中添加格式化标识：

<h1 i18n>Hello i18n!</h1>

现在运行一下，页面是：

在这里插入图片描述
生成翻译模板语言包：

ng extract-i18n --output-path src/locale

生成了一个文件夹：locale，里面有一个文件messages.xlf

会把source里的内容翻译成target：

在这里插入图片描述

我们这里想有两种语言，法文和中文。因此：

为什么中文是zh-CN，法文是fr-FR，看这里：https://angular.cn/guide/i18n-common-locale-id

在这里插入图片描述
在这里插入图片描述

<!-- messages.zh.xlf -->
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"><file source-language="zh-CN" datatype="plaintext" original="ng2.template"><body><trans-unit id="4150330030790364157" datatype="html"><source>Hello i18n!</source><target>中文版：你好 i18n!</target><context-group purpose="location"><context context-type="sourcefile">src/app/app.component.html</context><context context-type="linenumber">1</context></context-group></trans-unit></body></file>
</xliff>

<!-- messages.fr.xlf -->
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"><file source-language="fr-FR" datatype="plaintext" original="ng2.template"><body><trans-unit id="4150330030790364157" datatype="html"><source>Hello i18n!</source><target>法语版:Bonjour l'i18n !</target><context-group purpose="location"><context context-type="sourcefile">src/app/app.component.html</context><context context-type="linenumber">1</context></context-group></trans-unit></body></file>
</xliff>

相关文档：https://angular.cn/guide/i18n-common-translation-files

接下来是配置angular.json（根据文档）。

在这里插入图片描述

"i18n": {"sourceLocale": "en-US","locales": {"fr": {"translation": "src/locale/messages.fr.xlf"},"zh": {"translation": "src/locale/messages.zh.xlf"}}
},

在这里插入图片描述

"localize": true,

配置完了。接下来从命令行构建：

ng build --localize

然后再配置：

在这里插入图片描述

"build"->"configurations"：

"fr": {"localize": ["fr"]},"zh": {"localize": ["zh"]}

"serve"->"configurations"：

"fr": {"browserTarget": "i18nDemo:build:development,fr"
},
"zh": {"browserTarget": "i18nDemo:build:development,zh"
}

运行

法语版：

ng serve --configuration=fr

在这里插入图片描述
中文版：

ng serve --configuration=zh

在这里插入图片描述

跟前面的xml文件一致。

ps：后面的生产构建ng build --configuration=production,fr报错了，不知道怎么搞，等会了再来补充。

在TS中国际化

参考：
angular6 使用信息提示框toast_angular4 消息提示框-CSDN博客
ngx-toastr - npm (npmjs.com)
https://angular.cn/guide/i18n-common-prepare

语法：

在组件代码中，翻译源文本和元数据被反引号 （`） 字符包围。 使用 $localize 标记的消息字符串在代码中标记出要翻译的字符串。

$localize `string_to_translate`;

在这里插入图片描述

参考

Angular 国际化

超详细的 Angular 国际化方案 - 掘金 (juejin.cn)

Angular使用内置i18n国际化配置Angular国际化_angular i18n-CSDN博客

angular 国际化 (i18n) - 简书 (jianshu.com)

Angular8升级至Angular13遇到的问题_package ‘@angular/core’ is not a dependency.-CSDN博客

angular6 使用信息提示框toast_angular4 消息提示框-CSDN博客

ngx-toastr - npm (npmjs.com)

心得：新手入门，纯看官方文档感觉太抽象太难了，就结合其他博客进行理解。然后发现其他博客的一些配置已经被废弃了，然后又去看官方文档。这个过程中过滤掉很多看不懂的（…）信息，又总结了很多能看懂优质博客（！），慢慢就学会了！感谢所有写博客的人，救我一命。。

相关文章：

【angular】实现简单的angular国际化(i18n)

文章目录 目标过程运行在TS中国际化参考 目标 实现简单的angular国际化。本博客实现中文版和法语版。 将Hello i18n!变为中文版&#xff1a;你好 i18n!或法语版:Bonjour l’i18n !。 过程 创建一个项目&#xff1a; ng new i18nDemo在集成终端中打开。 添加本地化包&#…...

编程日记 2023/10/13 18:47:35

Redis之主从复制，哨兵模式，集群

Redis之主从复制&#xff0c;哨兵模式&#xff0c;集群 1、主从复制1.1主从复制概述1.2Redis主从复制作用1.3Redis主从复制流程1.4部署Redis 主从复制 2、哨兵模式2.1哨兵模式原理2.2哨兵模式的作用2.3哨兵模式的结构2.4故障转移机制2.5搭建Redis 哨兵模式 3、Redis集群模式3.1…...

编程日记 2023/10/13 18:45:34

掌动智能浅析Web自动化测试的重要性

在现代Web开发中&#xff0c;确保Web应用程序的质量和稳定性至关重要。Web自动化测试工具成为了开发团队的关键资源&#xff0c;帮助他们自动化测试流程、减少手动劳动&#xff0c;提高测试覆盖率和效率。本文将介绍Web自动化测试的重要性是什么! Web自动化测试的重要性&#x…...

编程日记 2023/10/13 18:44:32

JTS: 12 Descriptions 图形覆盖

这里写目录标题 版本代码Intersection 交集Union 并集Difference 差集SymDifference 补集 版本 org.locationtech.jts:jts-core:1.19.0 链接: github 代码 /*** 图形覆盖操作* author LiHan* 2023年10月12日 19:34:09*/ public class GeometryDescriptions {private final Ge…...

编程日记 2023/10/13 18:43:32

业务安全五重价值：防攻击、保稳定、助增收、促合规、提升满意度

目录 防范各类威胁攻击 保障业务的连续性和稳定性 保障业务的合规性 提升企业营收和发展 提升企业满意度和品牌知名度 2023年暑假被“票贩子”和“黄牛”攻陷。他们利用各种手段抢先预约名额&#xff0c;然后加价出售给游客&#xff0c;导致了门票供不应求的局面&#xff…...

编程日记 2023/10/13 18:42:30

shiro反序列化和log4j

文章目录 安装环境shiro漏洞验证log4j 安装环境 进入vulhb目录下的weblogic&#xff0c;复现CVE-2018-2894漏洞&#xff1a; cd /vulhub/shiro/CVE-2010-3863查看docker-compose的配置文件&#xff1a; cat docker-compose.yml如图&#xff0c;里面有一个镜像文件的信息和服…...

编程日记 2023/10/13 18:41:29

『Linux项目自动化构建工具』make/Makefile

前言 如题可知,make/Makefile为在Linux下的项目自动化构建工具; 在上一篇文章『Linux - gcc / g』c程序翻译过程 中讲解了C/C程序的翻译过程; 而make/Makefile即可以看成,是Makefile在使用gcc/g使在Linux环境下能够更好的高效率的进行项目构建; 在此之前首先要对make/Makefile…...

编程日记 2023/10/13 18:40:28

github提示Permission denied (publickey)，如何才能解决

当GitHub提示“Permission denied (publickey)”错误&#xff0c;这通常意味着您的SSH密钥没有被正确地配置。以下是一些常见的解决步骤&#xff0c;帮助您诊断和解决该问题&#xff1a; 检查是否已设置SSH密钥&#xff1a; 运行以下命令检查是否存在SSH密钥&#xff1a; bash…...

编程日记 2023/10/13 18:39:27

金x软件有限公司安全测试岗位面试

目录 一、自我介绍 二、你是网络空间安全专业的&#xff0c;那你介绍下网络空间安全这块主要学习的东西&#xff1f; 三、本科专业是网络工程&#xff0c;在嘉兴海视嘉安智城科技有限公司实习过&#xff0c;你能说下干的工作吗&#xff1f;&#xff08;没想到问的是本科实习…...

编程日记 2023/10/13 18:38:25

c语言之strlen函数使用和实现

文章目录 前言一、strlen函数使用二、实现方法 前言 c语言之strlen函数使用和实现 一、strlen函数使用 strlen函数返回的是在字符串中的个数&#xff0c;但不包含字符串结束符’\0’ #include<stdio.h> #include<string.h> int main() {char str1[] "abcd…...

编程日记 2023/10/13 18:37:22

网络初识（JAVA EE）

文章目录 一、网络发展史二、网络通信基础三、协议分层四、封装和分用 一、网络发展史 独立模式&#xff1a;计算机之间相互独立&#xff0c;每个终端都各自持有客户数据&#xff0c;且当处理一个业务时&#xff0c;按照业务流程进行 网络互连&#xff1a;将多台计算机连接在一…...

编程日记 2023/10/13 18:36:21

kantts docker化

kan-tts docker本地化 环境安装 下载docker镜像(python3.8的) registry.cn-hangzhou.aliyuncs.com/modelscope-repo/modelscope:ubuntu20.04-cuda11.8.0-py38-torch2.0.1-tf2.13.0-1.9.2 安装基础模型 pip install modelscope 安装语音模型 pip install "modelscope…...

编程日记 2023/10/13 18:35:20

Axure RP医疗在线挂号问诊原型图医院APP原形模板

医疗在线挂号问诊Axure RP原型图医院APP原形模板&#xff0c;是一款原创的医疗类APP&#xff0c;设计尺寸采用iPhone13&#xff08;375*812px&#xff09;&#xff0c;原型图上加入了仿真手机壳&#xff0c;使得预览效果更加逼真。 本套原型图主要功能有医疗常识科普、医院挂号…...

编程日记 2023/10/13 18:33:18

Vuex的基础使用存值及异步

目录 一、概述 ( 1 ) 讲述 ( 2 ) 概念 ( 3 ) 作用 二、取值 1. 安装 2. 菜单栏 3. 模块 4. 引用 三、改值 四、异步&后台请求 带来的获取 一、概述 ( 1 ) 讲述 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的…...

编程日记 2023/10/13 18:32:17

git 重置到某次提交

情形1&#xff1a; 回滚到之前的某版本&#xff0c;且删除该版本之后的提交 1&#xff09;用 git log 查看版本号&#xff08;commit后的就是版本号) 2&#xff09;用 git reset --hard <版本号> 命令回滚到之前某版本. 此时本地已经回滚&#xff0c;远程仓库还未回滚 3&…...

编程日记 2023/10/13 18:31:14

Delphi 生成包含图片的 HTML 文件并使用 Edge 浏览器打开

在 Delphi 中&#xff0c;可以使用以下代码生成包含图片的 HTML 文件&#xff0c;并使用 Edge 浏览器打开该文件。 procedure GenerateHTMLWithImageAndOpenWithEdge; varOpenDialog: TOpenDialog;HTMLFileName: string;HTMLContent: TStringList; beginOpenDialog : TOpenDi…...

编程日记 2023/10/13 18:30:12

凉鞋的 Godot 笔记 108. 第二个通识：增删改查

在这一篇&#xff0c;我们来学习此教程的第二个通识&#xff0c;即&#xff1a;增删改查。 增删改查我们不只是一次接触到了。 在最先接触的场景窗口中&#xff0c;我们是对 Node 进行增删改查。 在文件系统窗口中&#xff0c;我们是对文件&文件夹进行增删改查&#xff1…...

编程日记 2023/10/13 18:29:11

AI Web3 盛会「EDGE」在港闭幕，融云国际影响力持续提升

&#x1f446;点击报名「爱嗨游」线上发布会 9 月 25 日至 27 日&#xff0c;全球规模最大的 AI & Web3 投资盛会——EDGE 峰会在中国香港举办&#xff0c;融云作为战略合作伙伴与来自世界各地的企业家、投资人、学者和热门项目方一同完成了这一盛会。关注【融云全球互联网…...

编程日记 2023/10/13 18:28:10

启动Spring Boot项目

介绍启动运行Spring Boot项目打包的jar 1、使用java -jar命令启动项目 java -jar project.jar 执行效果&#xff1a; 使用java -jar 文件名.jar启动项目&#xff0c;项目在前台运行&#xff0c;项目运行的日志将打印在当前控制台上&#xff0c;若退出当前控制台&#xff0c…...

编程日记 2023/10/13 18:27:08

竞赛选题 深度学习 机器视觉 车位识别车道线检测 - python opencv

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 车位识别车道线检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) …...

编程日记 2023/10/13 18:26:07

RWKV vs. LLaMA2：在论文审稿任务上，我为什么第一版选了它（以及为什么后来放弃了）

RWKV与LLaMA2在论文审稿任务中的技术选型反思 当面对一个需要处理长文档的AI审稿系统时&#xff0c;模型选型往往成为决定项目成败的关键因素。2023年第三季度&#xff0c;我们在构建论文审稿GPT第一版时&#xff0c;做出了一个在当时看来合理但事后证明值得商榷的决策——选择…...

编程新知 2026/5/20 5:30:50

CANN/asc-devkit MrgSort合并排序函数

MrgSort 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https://gitcode.com/ca…...

编程新知 2026/5/20 4:57:33

中控SCADA的VBS脚本玩不转了？试试用Python来“降维打击”，搞定复杂数据处理与模型调用

中控SCADA的VBS脚本玩不转了&#xff1f;试试用Python来“降维打击”&#xff0c;搞定复杂数据处理与模型调用 在工业自动化领域&#xff0c;中控SCADA系统长期扮演着数据采集与监控的核心角色。然而&#xff0c;当项目需求从简单的数据记录升级到需要复杂分析、预测性维护或实…...

编程新知 2026/5/20 4:48:36

Cat-Catch：浏览器资源嗅探的终极解决方案与实用指南

Cat-Catch&#xff1a;浏览器资源嗅探的终极解决方案与实用指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在当今数字内容爆炸的时代&#xf…...

编程新知 2026/5/20 4:44:18

GIS技巧100例23-ArcGIS像元统计实战：从月度栅格到年度气候指标

1. 像元统计基础与气候数据特点 刚接触GIS处理气候数据时&#xff0c;我经常被各种栅格格式和统计方法搞得晕头转向。直到有次用ArcGIS的像元统计工具批量处理了5年的月降水数据&#xff0c;才发现这个功能简直是隐藏的效率神器。像元统计&#xff08;Cell Statistics&#xff…...

编程新知 2026/5/20 3:59:07

方法区内存回收机制与核心引用链深度剖析

在 Java 虚拟机&#xff08;JVM&#xff09;的内存管理体系中&#xff0c;方法区&#xff08;JDK 1.8 及以后具体实现为元空间 Metaspace&#xff09;的垃圾回收主要聚焦于两部分&#xff1a;废弃的常量池清理以及无用类的卸载&#xff08;Class Unloading&#xff09;。由于类…...

编程新知 2026/5/20 2:59:27

Qt新手也能搞定的GPU加速图片渲染：用QOpenGLWidget和QImage实现高性能显示

Qt新手也能搞定的GPU加速图片渲染&#xff1a;用QOpenGLWidget和QImage实现高性能显示 在Qt应用开发中&#xff0c;处理高分辨率图片或序列帧&#xff08;如医学影像、地图切片&#xff09;时&#xff0c;传统的QLabel显示方式常会遇到性能瓶颈。当图片尺寸超过1080P或需要快速…...

编程新知 2026/5/20 2:57:19

别再傻傻分不清！PECL、CML、LVDS三种高速差分接口，硬件工程师选型避坑指南

高速差分接口选型实战&#xff1a;PECL、CML、LVDS的工程化决策指南 当PCB布线密度突破8层板、信号速率迈入Gbps时代&#xff0c;差分接口的选择直接决定系统稳定性。某通信设备厂商曾因误用LVPECL接口导致整批产品EMC测试失败&#xff0c;损失超百万——这类故事在硬件圈屡见不…...

编程新知 2026/5/20 0:54:57

RK3399嵌入式Linux开发：Sysfs内核虚拟文件系统深度探索与实践指南

1. 项目概述&#xff1a;为什么从Sysfs开始内核探索拿到一块RK3399这样的高性能开发板&#xff0c;无论是做产品原型还是学习嵌入式Linux&#xff0c;第一步往往都是“点亮”和“跑起来”。但当系统启动&#xff0c;命令行提示符闪烁时&#xff0c;很多开发者&#xff0c;尤其是…...

编程新知 2026/5/19 22:41:06

10分钟掌握Dism++：Windows系统优化终极完整指南

10分钟掌握Dism&#xff1a;Windows系统优化终极完整指南 【免费下载链接】Dism-Multi-language Dism Multi-language Support & BUG Report 项目地址: https://gitcode.com/gh_mirrors/di/Dism-Multi-language 还在为Windows系统越来越慢而烦恼吗&#xff1f;磁盘空…...

编程新知 2026/5/19 22:35:02