角度5国际化

在花时间研究这件事之后,我想我应该把我发现的主要区别贴出来 ngx-translate 和 Angular-i18n :

• Angular目前只支持在模板中使用i18n,我正在开发一个功能,允许您在代码中使用它,但这项工作仍在进行中。这个库可以在代码和模板中工作
• Angular支持XLIFF或XMB(两者都是XML格式),而这个库默认支持JSON,但您可以编写自己的加载程序来支持您想要的任何格式(例如,有一个用于PO文件的加载程序)。就个人而言,Json文件比其他格式更易于阅读,但这并不是一个很大的缺点。
• Angular支持ICU表达式(复数和select),但此库不支持
• Angular支持包含Angular代码的html占位符,而这个库只支持常规html(因为它是在运行时执行的,而不是在编译期间执行的,而且AngularJS中没有像AngularJS中那样的$compile)
• 这个库的API更完整,因为它是在运行时执行的,它可以提供更多的东西(可观察的、事件等)哪个角度没有(但考虑到您无法更改平移,因此实际上不需要) ngx translate的创始人曾说过:

Ocombe (ngx开发者):@josersleal他们就是这么做的, angular团队聘请我为每个人改进i18n,但没有 在工作3年后,将我的lib直接集成到核心中的方法 对于核心团队,我可以告诉你,角度i18n要多得多 比我的lib复杂和复杂。它处理了很多更复杂的问题 它做到了这一点,没有我的 lib有。我理解核心没有做到这一点令人沮丧 尽可能快地发展图书馆的功能,但这是有原因的 第一个问题是,你不能实现一些东西 每当您看到忘记包含用例时,请更改它。 一切都必须彻底计划和思考。不过,你会的 拥有这个lib在 但不幸的是,我们可能需要一年的时间才能到达那里。 好消息是,这将比我的天真要好得多

这篇文章很好地讨论了ngx translate和Angulars i18n之间的主要差异: https://github.com/ngx-translate/core/issues/495

i18n的更改应在angular版本6中进行。今天,我们正在使用版本5:

• 不是5.0版本,而是6.0版本之前(2018年3月之前)。不幸的是,我没有更准确的日期

• ngx translate的开发人员(现在是angular-i18n的主要贡献者)在12天前发布了以下内容: https://github.com/angular/angular/issues/20193

• 以下是i18n的设计文件(现有技术部分很有趣): https://docs.google.com/document/d/1LH7lJ1GjRgpGUjzNb6Eg4xrPooRdi80QOTYYh8z_JyY/edit#

一些想法

• 如果我们使用搜索引擎优化,angular-i18n将是前进的方向,因为url浏览。就我而言,我根本不需要这个。
• 如果我们再次需要复数切换等,我不需要这个,我只需要在模板和代码中进行一个相当直接的运行时语言切换。
• Angular-i18n至少要到2018年3月才能发布。对我来说,我等不及了,因为我现在需要建立我的应用程序。
• ngx translate不会像angular-i18n那样具有全面的功能,但我只需要简单的运行时翻译,所以我认为它适合我们的需要。
• ngx translate是开源的,当它不再被开发时,如果有严重的问题,我想我可以自己解决(希望到那时,任何可能出现的问题都会解决)。

我还将看看Angular-l10n库,因为它看起来非常好:

• 角度-l10n- https://github.com/robisim74/angular-l10n

对ngx翻译到现在为止都很好,我希望它在未来也会很好。

ngx-translate 在我目前的Angular 5项目中,有5种以上的语言。

到目前为止,它对我来说效果很好。我不需要做任何自定义更改,它就像即插即用一样工作。

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

您可以使用配置文件和语言json文件来代替ng translate 您可以将该json文件放置在服务器位置,并从角度轻松访问它

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

{ 
  "LANGUAGE": "fr.json" 

}

在里面 en/fr.json

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

}

hear是 sample code

应用程序。组成部分

export class AppComponent  {

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

您可以使用配置。js文件

将此代码段添加到索引。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>

配置。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 demo

希望这能有所帮助。。!