加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular-i18n可以解决代码中的翻译问题吗?

发布时间:2020-12-17 17:47:19 所属栏目:安全 来源:网络整理
导读:我们必须等到Angular 6 for angular-i18n才能支持错误消息代码的翻译等. 对于那些使用angular-i18n(例如,而不是ngx-translate)的人,你在做什么同时处理代码中的翻译?在我看来,如果没有很多字符串,那么一个简单的语言服务,通过语言代码和id来获得翻译的方法
我们必须等到Angular 6 for angular-i18n才能支持错误消息代码的翻译等.

对于那些使用angular-i18n(例如,而不是ngx-translate)的人,你在做什么同时处理代码中的翻译?在我看来,如果没有很多字符串,那么一个简单的语言服务,通过语言代码和id来获得翻译的方法就可以了,但我对更优雅和“有棱角”的东西感兴趣.

我不知道承诺的代码翻译支持会是什么样子,但任何临时解决方案在上线时都可以很容易地转换为angular-i18n方式.

有什么人在处理这个问题?有任何想法吗?

解决方法

这种polyfill似乎是现在最好的方式:

https://github.com/ngx-translate/i18n-polyfill

它允许您在i18n()函数中包装您想要翻译的任何内容(此API可能会在Angular的未来版本中保留 – 请参阅本答案底部的注释).

polyfill主要由负责i18n的Angular团队成员Olivier Combe编写:

对于Angular 5,安装时需要0.2.0版本:

npm install @ ngx-translate / i18n-polyfill @ 0.2.0 –save

对于Angular 6,获取最新版本 – 目前为1.0.0:

npm install @ ngx-translate / i18n-polyfill @ 1.0.0 –save

对于Angular 5,我将polyfill用于JIT和AOT编译(它也适用于Angular 6).以下是翻译成单一语言所需要做的事情(这是一种很好的工作方式 – 您可以在以后使用多种语言,我会进一步解释):

app.module.ts

将以下导入添加到根Angular模块:

import { TRANSLATIONS,TRANSLATIONS_FORMAT } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';

添加以下常量,并在根模块中指定提供程序:

// add this after import + export statements
// you need to specify the location for your translations file
// this is the translations file that will be used for translations in .ts files

const translations = require(`raw-loader!../locale/messages.fr.xlf`);

@NgModule({ ....

  providers:
  [
    I18n,{provide: TRANSLATIONS,useValue: translations},{provide: TRANSLATIONS_FORMAT,useValue: 'xlf'},...

Note on using AOT compilation: If you’re using AOT compilation to
translate your templates,translation of the messages in .ts files
will still be done at runtime using JIT compilation
(that’s why you
need to reference TRANSLATIONS and TRANSLATIONS_FORMAT instead of just
specifying these in your build scripts).

* .TS

在要提供翻译的.ts文件中,添加以下内容:

import { I18n } from '@ngx-translate/i18n-polyfill';

constructor(private i18n: I18n) {
    console.log(i18n("This is a test {{myVar}} !",{myVar: "^_^"}));
}

这表明您甚至可以在要翻译的消息中包含插值.

您可以使用i18n定义(即使用指定翻译’source’id,含义,描述),如下所示:

this.i18n({value: 'Some message',id: 'Some message id',meaning: 'Meaning of some message',description: 'Description of some message'})

您仍然需要提取消息,并且可以使用ngx-extractor工具执行此操作.这是在安装polyfill时包含的,我在npm脚本中添加了一个下面的示例.另见polyfill page的自述文件.

多种语言

要支持在多种语言之间切换,您需要为翻译提供工厂提供程序.有关polyfill page自述文件的详细信息.您的根模块中需要这样的东西(或者对于AOT编译,用一个检测当前正在运行的应用程序的AOT编译语言变体的函数替换localeFactory的返回值) :

export function localeFactory(): string {
    return (window.clientInformation && window.clientInformation.language) || window.navigator.language;
  }

  providers:
  [
    {
      provide: TRANSLATIONS,useFactory: (locale) => {
        locale = locale || 'en'; // default to english if no locale provided
        return require(`raw-loader!../locale/messages.${locale}.xlf`);
      },deps: [LOCALE_ID]
    },{
      provide: LOCALE_ID,useFactory: localeFactory
    },

消息提取和xliffmerge

所有这些都与xliffmerge兼容,xliffmerge是一个很好的工具,可以自动合并您添加的任何新翻译,而不会覆盖现有翻译. Xliffmerge还可以使用Google翻译自动执行翻译(您需要Google翻译API密钥).为了实现这一点,在进行实际的AOT构建之前,我按以下顺序进行提取和合并/转换:

"extract-i18n-template-messages": "ng xi18n --outputPath=src/locale --i18n-format=xlf","extract-i18n-ts-messages": "ngx-extractor --input="src/**/*.ts" --format=xlf --out-file=src/locale/messages.xlf","generate-new-translations": "xliffmerge --profile xliffmerge.json en fr es de zh"

针对特定语言版本的网站的AOT构建如下所示:

"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",

此polyfill的当前状态:

这主要由负责i18n的Angular团队成员Olivier Combe撰写.在这个阶段,这是一个’推测’polyfill,用于翻译.ts文件中的变量或字符串.它可能会被Angular中内置的API所取代,这将非常相似,因此以后升级应该是合理可管理的.这是来自Github页面的备忘录:

This library is a speculative polyfill,it means that it’s supposed to
replace an API that is coming in the future.
If the API is different,a migration tool will be provided if it’s possible and necessary.

关于支持即将出现的Angular 6的次要版本,代码中的变量/字符串的翻译.

以下是Olivier Combe(今年3月起)的引用,来自以下关于Github的讨论:

https://github.com/angular/angular/issues/11405

The first PR for runtime i18n has been merged into master,along with a hello world demo app that we will use to test the features. It works at runtime,and support theoretically code translations,even if there is no service for it yet. For now it’s very minimal support (static strings),we’re working on adding new features (I’ll make the extraction work next week,and then dynamic string with placeholders and variables). After that we’ll do the service for code translations. As soon as a new feature is finished it gets merged into master,you won’t have to wait for a new major.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读