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

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

news 2026/2/4 23:03:02

文章目录

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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/1 6:20:45

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/1 10:33:51

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/4 16:30:39

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/1/26 22:27:53

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/1/26 9:48:34

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/1/20 22:51:34