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

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

news 2025/9/13 13:29:22

文章目录

    • 目标
    • 过程
    • 运行
    • 在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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/9/9 10:12:51

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/9/9 10:12:42

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/9/10 4:00:44

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/8/19 5:37:33

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/8/22 7:03:09

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/9/10 23:16:27

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/9/12 23:21:57

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/9/12 23:21:56

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2025/9/9 22:47:25