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

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

news 2026/3/30 19:54:36

文章目录

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

终极LoRaWAN服务器搭建指南：如何快速构建你的私有物联网网络

终极LoRaWAN服务器搭建指南&#xff1a;如何快速构建你的私有物联网网络 【免费下载链接】lorawan-server Compact server for private LoRaWAN networks 项目地址: https://gitcode.com/gh_mirrors/lo/lorawan-server 你是否想拥有一个完全可控的LoRaWAN物联网平台&…...

编程新知 2026/3/30 18:52:56

【智能汽车竞赛】从理论到实战：PID参数整定的艺术与避坑指南

1. PID控制&#xff1a;智能车竞赛的核心武器 第一次参加智能车比赛时&#xff0c;我看着自己的小车在赛道上蛇形走位的样子&#xff0c;简直像个醉汉。直到真正理解了PID控制&#xff0c;才明白原来让小车"听话"是门技术活。PID控制器就像给小车装了个智能大脑&…...

编程新知 2026/3/30 18:04:35

恶意代码分析——基础技术篇

恶意代码分析——基础技术篇 文章目录 恶意代码分析目的恶意代码分析方法恶意代码种类恶意代码静态分析 环境在线反病毒引擎获取哈希值&#xff08;certutil-hanshfile path MD5&#xff09;查找字符串hive string ida火绒剑加壳&查壳 文件加壳使用PEiD检测加壳 导入导出…...

编程新知 2026/3/30 17:32:07

Hunyuan-MT-7B效果展示：学术论文摘要英→中翻译在专业术语一致性表现

Hunyuan-MT-7B效果展示&#xff1a;学术论文摘要英→中翻译在专业术语一致性表现 1. 引言&#xff1a;专业翻译的技术挑战 学术论文翻译一直是机器翻译领域的难点&#xff0c;特别是专业术语的一致性保持。传统翻译工具在处理学术文献时&#xff0c;经常出现术语翻译不统一、…...

编程新知 2026/3/30 14:56:37

ScanTailor Advanced：免费开源扫描文档处理终极指南

ScanTailor Advanced&#xff1a;免费开源扫描文档处理终极指南 【免费下载链接】scantailor-advanced ScanTailor Advanced is the version that merges the features of the ScanTailor Featured and ScanTailor Enhanced versions, brings new ones and fixes. 项目地址: …...

编程新知 2026/3/30 12:36:15

掌握MediaPipeUnityPlugin：从0到1的面部表情捕捉实践指南

掌握MediaPipeUnityPlugin&#xff1a;从0到1的面部表情捕捉实践指南 【免费下载链接】MediaPipeUnityPlugin Unity plugin to run MediaPipe 项目地址: https://gitcode.com/gh_mirrors/me/MediaPipeUnityPlugin 在Unity开发中&#xff0c;实现高精度面部表情捕捉常面临…...

编程新知 2026/3/30 12:36:15

企业级邮件系统自建指南：从技术选型到生产部署

企业级邮件系统自建指南&#xff1a;从技术选型到生产部署 【免费下载链接】james-project James Project是一个用于电子邮件服务器的开源软件。适用于需要为其邮件基础设施提供强大和可靠的邮件传输代理的企业和组织。具有可扩展性、灵活性和易于使用的特点。 项目地址: htt…...

编程新知 2026/3/30 12:32:14

协议数采网关在智慧水务场景中的应用与功能

水资源管理作为生态文明建设的关键组成部分&#xff0c;其重要性不言而喻。在智慧水务建设不断深化的当下&#xff0c;水质监测、水量调度以及设备运维等各个环节&#xff0c;都对智能化水平提出了更为严苛的要求。然而&#xff0c;当前水务行业面临着诸多难题&#xff0c;监测…...

编程新知 2026/3/30 12:28:13

雪女-斗罗大陆-造相Z-Turbo助力AI编程：自动生成代码片段与函数注释

雪女-斗罗大陆-造相Z-Turbo助力AI编程&#xff1a;自动生成代码片段与函数注释 作为一名写了十几年代码的老兵&#xff0c;我经历过从记事本写代码到现代IDE的整个进化史。这些年&#xff0c;各种提升效率的工具层出不穷&#xff0c;但“写代码”这件事的核心——将想法转化为…...

编程新知 2026/3/30 12:28:13

Minecraft Masa Mods汉化包终极指南：三分钟告别英文界面困扰

Minecraft Masa Mods汉化包终极指南&#xff1a;三分钟告别英文界面困扰 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 还在为Masa Mods系列模组的英文界面而烦恼吗&#xff1f;每次打…...

编程新知 2026/3/30 12:24:13