47

我正在使用最新的 Angular5 构建一个应用程序，我需要的是让用户能够切换语言。我从来不需要在 Angular2+ 中实现这个（实际上我使用的是 Angular5）。

我需要在两个地方设置翻译：

  • 组件的模板 html - 将标签更改为指定的语言
  • 在 component.ts 文件中的代码中 - 我可能需要翻译一些在代码中特定条件下动态构建的字符串

我正在查看ngx-translation，它看起来可以满足我的所有需求，因为它允许您在不重新构建代码的情况下更改语言，请参见此处。但是我读到它可能会被弃用，因为主要开发人员转移到 Angular 团队来开发他们的 i18n 代码。

我也了解当前的i18n不支持我现在需要的一切，请参见此处。

我的问题 - 最新版本的 Angular 中翻译的状态如何？是否有人会推荐其他库，如果确实，Angular 本身还没有得到完全支持（用于更改语言而不重新编译）？ngx-translate 对未来有好处吗？

非常感谢这方面的任何指导！

4

3 回答 3

57

在花时间研究这个之后，我想我会发布我在ngx-translate和Angular-i18n之间发现的主要区别：

  • Angular 一次只能使用一种语言，您必须完全重新加载应用程序才能更改语言。JIT 支持仅意味着它可以与 JIT 一起使用，但您仍然必须在引导时提供翻译，因为它将在编译期间替换模板中的文本，而此库使用绑定，这意味着您可以随时更改翻译. 缺点是绑定占用内存，因此 Angular 方式的性能更高。但是，如果您将 OnPush 用于您的组件，您可能永远不会注意到差异
  • Angular 目前仅支持在您的模板中使用 i18n，我正在开发允许您在代码中使用它的功能，但它仍在进行中。这个库在代码和模板中都有效
  • Angular 支持 XLIFF 或 XMB（都是 XML 格式），而这个库默认支持 JSON，但您可以编写自己的加载器来支持您想要的任何格式（例如，有一个用于 PO 文件的加载器）。就个人而言，Json 文件比其他格式更易于阅读，但这并不是一个巨大的缺点。
  • Angular 支持 ICU 表达式（复数和选择），但这个库不支持
  • Angular 支持 html 占位符，包括 Angular 代码，而这个库只支持常规的 html（因为它是在运行时执行的，而不是在编译期间执行的，并且在 Angular 中没有 $compile 就像在 AngularJS 中一样）
  • 这个库的 API 更完整，因为它是在运行时执行的，它可以提供更多 Angular 所没有的东西（observables，events，...）（但实际上并不需要，因为你无法更改翻译） ngx-translate 的创建者这样说：

奥科姆（ngx 的开发者）：@josersleal 这正是他们所做的，Angular 团队聘请我为每个人改进 i18n 但是没有办法将我的 lib 直接集成到核心中，在为核心团队工作了 3 个月后，我可以告诉你认为 Angular i18n 比我的 lib 更复杂、更精细。它处理了很多更复杂的东西，而且它没有我的库所具有的所有错误和缺点。我知道核心的发展速度不如库的发展速度令人沮丧，但这是有原因的，第一个原因是您无法实现某些内容并在看到忘记包含时更改它用例。一切都必须经过彻底的计划和思考。尽管如此，你将拥有这个库在未来可以在核心中做的大部分事情，但不幸的是，我们可能需要一年的时间才能到达那里。好消息是它会比我幼稚的实现要好得多。

这是一篇很好的文章来讨论 ngx-translate 和 Angular 的 i18n 之间的主要区别：https ://github.com/ngx-translate/core/issues/495

i18n 的更改应在 angular 版本 6 中进行。今天，我们目前使用的是第 5 版：

一些想法……</p>

  • 当您以所需的语言编译应用程序时（而不是在运行时进行翻译），Angular-i18n 的性能更高。也可能是一个缺点，因为您可能需要使用不同语言构建多个应用程序。
  • 如果我们使用 SEO，由于 url 浏览，angular-i18n 将是前进的方向。就我而言，我根本不需要这个。
  • 如果我们需要复数切换等。同样，我不需要这个——我只需要在模板和代码中进行相当直接的运行时语言切换。
  • Angular-i18n 至少要到 2018 年 3 月才会发布。对我来说，我不能等到那时，因为我现在需要构建我的应用程序。
  • ngx-translate 没有 angular-i18n 那样全面的功能集，但是我只需要简单的运行时翻译，所以认为它可以满足我们的需要。
  • ngx-translate 是开源的，到了它不再被开发的那一天，如果有一个严重的问题我想我可以自己解决（希望到那个时候，可能出现的任何问题都会得到解决）。

我还将看一下 Angular-l10n 库，因为它看起来非常好：

于 2017-11-17T13:54:35.210 回答
6

是的。ngx-translate 到目前为止还不错，我希望将来也会如此。

我在我当前的 Angular 5 项目中使用ngx-translate和 5 种以上的语言。

到目前为止，它对我来说工作正常。我不必进行任何自定义更改，它就像即插即用一样工作。

我使用了这个插件https://github.com/ngx-translate/core

于 2017-11-16T05:44:16.893 回答
4

您可以使用配置文件和语言 json 文件，而不是使用 ng-translate，您可以将该 json 文件放在您的服务器位置并从角度轻松访问它

在config.json你可以玷污语言类型

{ 
  "LANGUAGE": "fr.json" 

}

在en/fr.json文件 中

{
    "TITLE": "Bonjour Angular avec translate !",
    "SELECT": "Changer la langue"

}

config.json 和语言文件

听到是示例代码

应用程序组件 

export class AppComponent  {

  name =  LAN_CONFIG['TITLE'];
  // name =  APP_CONFIG['LANGUAGE'];
}

或者

您可以使用 config.js 文件

将此代码段添加到 index.html 标头部分

<script>
    var xhrObj = new XMLHttpRequest();
    var url = '/assets/config/config.js';
    xhrObj.open('GET', url, false);
    xhrObj.send('');
    var se = document.createElement('script');
    se.type = "text/javascript";
    se.text = xhrObj.responseText;
    document.getElementsByTagName('head')[0].appendChild(se);
  </script>

config.js 文件

在此处输入图像描述

window.config= {};
window.config['LANGUAGE'] = 'er.js';

您可以使用该变量来访问值

@Injectable()
export class LanguageService {

  appConfig:AppConfigService;
  lanTypePath ='../../assets/i18n/'+ window['config'].LANGUAGE;
 constructor(private http: HttpClient)
  {
    console.log(APP_CONFIG['LANGUAGE']);
  }

  public load()
  {
    return new Promise((resolve, reject) => {

      this.http.get(this.lanTypePath).catch((error: any): any => {

        reject(true);
        return Observable.throw('Server error');
      }).subscribe((envResponse :any) => {
        let t = new LanConfig();
        //Modify envResponse here if needed (e.g. to ajust parameters for https,...)
        LAN_CONFIG = Object.assign(t, envResponse);
        resolve(true);
      });

    });
  }

}

对于您的情况，认为这种方法比以前更好

Github 演示

希望这会有所帮助..！

于 2019-10-29T07:15:55.930 回答