angular6.x 国际化解决方案-ngx-translate

最新推荐文章于 2024-09-18 02:32:40 发布
最新推荐文章于 2024-09-18 02:32:40 发布
阅读量4k 收藏 3
点赞数 2
分类专栏： angular 文章标签： angular ngx-translate 国际化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36822018/article/details/81504473
版权

原文地址：Liang的博客

安装 ngx-translate模块包

npm install @ngx-translate/core@9.1.1 --save
npm install @ngx-translate/http-loader --save

注意： ng6 需引入ngx-translate 10.0以上版本

创建 i18n 语言文件

在assets文件夹下创建 国际化语言文件夹 i18n，在i18n文件夹下创建相应的语言包文件，如图：

这里写图片描述

分别创建了中文语言包 —zh.json 英文语言包—en.json，这两个语言包的数据必须是一一对应的，否则会出不来相应的效果。

// zh.json
{
    "welcome":"欢迎您",
    "title":"钓鱼岛是中国的"
}

//en.json
{
    &
最低0.47元/天 解锁文章
夏夜听风雨
关注
专栏目录
angular中使用ngx-translate国际化配置
每日一算
02-21 1167
一、ngx-translate认识 ngx-translate：The internationalization (i18n) library for Angular. 二、安装 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 三、项目中配置使用ngx-translate...
Angular 国际化i18n : ngx-translate的使用
材女的进击
04-26 1557
ngx-translate库的安装 先奉上 ： ngx-translate 官网 和 GitHub的地址 在Angular项目中，我们主要用到了 @ngx-translate/core 和 @ngx-translate/http-loader 这两个模块，core模块是此库的核心，http-loader 是一个通过http调用翻译文件的加载器模块。 安装两包： npm install @ngx-...
Angular基于ngx-translate实现国际化流程
恍若c的博客
10-21 703
1、下载ngx-translate的依赖库 2、在项目根模块（app.module.ts）中配置ngx-translate
Angular 18+ 高级教程 – 国际化 Internationalization i18n
最新发布
weixin_30445963的博客
09-18 494
介绍 先讲讲名词。 Internationalization 的缩写是 i18n，中文叫国际化。 Globalization 是 Internationalization 的同义词，都是指国际化。 Localization 的缩写是 l10n，中文叫本地化。 i18n vs l10n 一个国际化，一个本地化，它俩有什么区别，又有什么关系呢？ 我们来看一个具体的例子 上图是苹果公司给美国人访问的...
Angular 11 app with ngx-translate
weixin_44841400的博客
07-09 499
第一步 创建一个angular演示项目 安装angular cli npm install -g @angular/cli 创建一个演示项目 ng new my-app 启动项目,访问localhost:4200出现下图就成功启动了 ng server 第二步 将ng-translate引入到my-app项目中 参见https://github.com/ngx-translate/core npm install @ngx-translate/core @ngx-translate/http-loa
5步让你在angular中添加多语言支持（ngx-translate）
m0_46531302的博客
01-13 1524
资料来源： GitHub - ngx-translate/core: The internationalization (i18n) library for Angular在创建好的项目中安装 @ngx-translate/core 第二步 安装http-loader 继续安装 @ngx-translate/http-loader 备注： 在较新的包（nodejs）时，无需添加 --save 参数修改app.module.ts, 添加关于 翻译所需要的代码添加 以及 使得效果如下 第
Angular 5.x 国际化解决方案 - ngx-translate的使用
热门推荐
halli的博客
03-08 1万+
Angular 5.x 国际化解决方案 - ngx-translate的使用 下面示例代码都是基于ionic3.x UI框架中的组件编写的，直接进入正题 ngx-translate库的安装   先放上ngx-translate官网及其github地址，在项目中，我们主要用到@ngx-translate/core和 @ngx-translate/http-loader两个模块，co...
Angular2+国际化实践：ngx-translate示例
本文主要探讨了在Angular2+应用程序中实现国际化的解决方案，采用ngx-translate库作为核心工具。ngx-translate提供了方便的方式来管理多语言内容，使得应用能够轻松切换不同的语言环境。 ngx-translate 是一个广受...
超详细的 Angular 国际化方案
Postcat 的博客
09-23 1201
肝很久，分享第一次在 Angular 框架上落地国际化方案，希望能帮到你~
Angular国际化中ngx-translate使用
mimoseLi的博客
01-18 3437
Angular中ngx-translate使用，国际化，多语系 ，全局ngx-translate配置，单个文件使用，使用Angular11,后台C#返回
angular6.0.0中使用ngx-translate
weixin_41224687的博客
10-11 915
一、安装 ngx-translate官网地址http://www.ngx-translate.com/    github地址https://github.com/ngx-translate/core 我们在应用中会使用到如下两个模块 1  安装 npm install @ngx-translate/core@10.0.0 --save 一定要注意版本问题： npm in...
如何在Angular8.0下使用ngx-translate进行国际化配置
10-16
主要介绍了如何在Angular8.0下使用ngx-translate进行国际化配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
http-loader：ngx-translate的加载器，通过http调用加载翻译
01-29
@ ngx-translate / http-loader 加载程序，使用http加载翻译。 使用ngx-translate的简单示例： ://stackblitz.com/github/ngx-translate/example 在此处获取完整的变更日志： : 安装 我们假设您已经安装了 。 现在，您需要为TranslateHttpLoader安装npm模块： npm install @ngx-translate/http-loader --save 选择与您的Angular版本相对应的版本： 角度的 @ ngx-translate / core @ ngx-translate / http-loader 10 13.x以上 6.x + 9 12.x以上 5.x以上 8 12.x以上 4.x + 7 11.x以上 4.x + 6 10倍 3.x 5 8.x至9.x 1.x至2.x 4.3 7.x以下 1.x至2.x 2至4.2.x 7.x以下 0.x 用法 1.设置TranslateModule以使用TranslateHttpLoa
ionic3学习之集成 ngx-translate
Wayfreem的博客
05-03 1010
集成 ngx-translate 官方连接 github：https://github.com/ngx-translate/core Step 1： 安装 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save Step 2： 导入TranslateMod...
Angular国际化翻译不生效
weixin_44776206的博客
07-02 1583
问题描述 Angular可以使用管道进行国际化翻译，当数据无法在html文件模板直接进行翻译是可以使用 .instant()或.get()方法获取i8n文件中的值；但是当页面渲染早于国际化加载时，会出现取不到值，直接渲染键的情况。 解决方法 方法一： app.module.ts imports: TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader)
Angular 中使用ngx-translate国际化配置
weixin_39565734的博客
06-21 861
导入声明Injectable从导入，用于标记服务为可注入的。从导入，这是 Angular 项目中用于多语言翻译的核心服务。定义接口Locale定义了一个接口Locale，包含两个属性：lang：表示语言的字符串。data：一个对象，包含特定语言的翻译数据。服务定义使用装饰器标记为 Angular 服务，并使用指定服务为全局单例。构造函数接收一个实例，通过依赖注入自动注入，用于调用翻译相关的 API。公共方法translate这个方法接受一个或多个Locale类型的参数，使用扩展运算符。
ngx-translate/core‘的使用(ionic+angular)
weixin_45379279的博客
08-13 548
@ngx-translate/core’的使用 增加语言文件： 日文语言配置文件： { "TITLE": "Hello sir", "TITLE_2": "Hello {{value}}", "description": "Ooohh .... did you just translate this text ?", "tabs": { "manual": "マニュアル", }, "filter":{ "all": "すべて", }, "step":{
ngx-translate实现国际化：this.translate.use()、this.translate.get()、this.translate.instant()、onLangChange
Ahua_Core的博客
06-12 2630
Angular ngx-translate实现国际化 ngx-translate的配置assets - i18n 创建国际化文件三级目录 学习Angular，第一次在项目中遇到关于ngx-translate实现国际化的需求。将实现过程、用法稍作总结。 ngx-translate的配置 用npm install ngx-translate的依赖 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --sav
国际化解决方案 ngx-translate
weixin_33875564的博客
06-19 544
应用程序的国际化涉及到开发的很多方面，主要是如何让应用可以被全世界的用户使用而且用起来比较友好。本章内容主要讲的下面几个方面： npm install @ngx-translate/core@9.1.1 --save npm install @ngx-translate/http-loader --save 复制代码创建 i18n 语言文件 在assets文件夹下创建 国际化语言文件夹 i18n，...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值