Angular使用内置i18n国际化配置Angular国际化

最新推荐文章于 2023-10-11 17:41:47 发布

CSDN 会员是我

最新推荐文章于 2023-10-11 17:41:47 发布

阅读量1.6k

点赞数 1

分类专栏： typescript Angular

本文链接：https://blog.csdn.net/u013117377/article/details/117290053

版权

typescript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Angular

2 篇文章 0 订阅

订阅专栏

前言

此文使用Angular官方工具完成国际化，优势原滋原味，贴合angular设计！我喜欢采用12345步骤法分享。喜欢的朋友点点关注不迷路。定时更新跟多 Angular 文章

1.环境准备

// 添加本地包
ng add @angular/localize

2.添加格式化标识

// 第一种添加方式
<h1 i18n>Hello i18n!</h1>

// 第二种方式 通过 @@xxx 来自定义id
<h1 i18n="@@hello" >Hello i18n!</h1>

3.生成翻译模板语言包

第一种生成方式

在src/locale/ 下生成基础文件 messages.xlf
ng extract-i18n --output-path src/locale/

第二种生成方式

指定生成src/locale/messages.xlf
ng extract-i18n --out-file src/locale/messages.xlf

4.语言文件的介绍与使用（messages.xlf）

介绍：

中文名是XML本地化数据交换格式，一种格式而已

范本：

<?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="8def8481e91291a52f9baa31cbdb313e6a6ca02b" datatype="html">
        <source>Hello i18n!</source>
        <target>你好 i18n!</target>
      </trans-unit>
    </body>
  </file>
</xliff>

trans-unit：

表示一个转化单元，内部涵盖，等标签，主要讲解这两标签

source：

表示原本的文本

target:

表示译文

5.实现多国语言创建

第一步

打开src/locale/messages.xlf文件复制一份

第二步

修改 src/locale/messages copy.xlf 文件为 messages.zh.xlf 表示为中文语言模板

第三步

修改 messages.zh.xlf 文件的file标签的属性source-language=“zh-CN”（可以搜索找file即可找到）

结语：

重复以上步骤完成对其他语言的扩展

6.配置angular.json

第一步：

配置 projects-> architect-> configurations

{
 "projects":{
  "architect":{
   "configurations":{
           "zh": {
              "aot": true,
              "outputPath": "dist/zh/",
              "i18nFile": "src/locale/messages.zh.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "zh",
              "i18nMissingTranslation": "error"
            },
            "en": {
              "aot": true,
              "outputPath": "dist/en/",
              "i18nFile": "src/locale/messages.en.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "error"
            },
    }
  }
 }
}

第二步：

配置 serve->configurations

"serve": {
          "configurations": {
            "zh": {
              "browserTarget": "i18ndemo:build:zh"
            },
            "en": {
              "browserTarget": "i18ndemo:build:en"
            },
          }
}

"browserTarget": “i18ndemo:build:zh”
i18ndemo 此处应该换成您的工程名字

7.最后一步启动

启动英文环境 ng serve --configuration=en

启动中文环境ng serve --configuration=zh

启动饿文环境 ng serve --configuration=ru

8.补录多环境启动

把三个包都打出来即可

或者在package.json中的scripts 下添加:

"build:en_zh_ru":"ng build --configuration=en && ng build --configuration=zh  && ng build --configuration=ru"

启动使用：npm run build:en_zh_ru

点击链接加入群聊【Cordova/Angular/Ionic/ 中文社区】群文件内有免费全集angular教程

进入方式点击连接

https://jq.qq.com/?_wv=1027&k=rk6cVCiN

或

交流群

CSDN 会员是我

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
Angular使用内置i18n国际化配置Angular国际化

@[TOC](angular 使用内置i18n(国际化))前言此文是使用angular官方内置的工具实现国际化的，优势官方原滋原味。更贴合angular设计！我喜欢采用12345步骤法写文章。如果喜欢的朋友点点关注不迷路。定时更新跟多有关 angular 的相关文章1.环境准备// 添加本地包ng add @angular/localize2.添加格式化标识// 第一种添加方式<h1 i18n>Hello i18n!</h1>// 第二种方式通过 @@xxx
复制链接

扫一扫