Angular5个国际化

Question

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

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

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

我正在关注 ngx-translation and it looks to do everything I need, as in it allows you to change language without rebuilding your code, see here. However I read it was probably going to be deprecated，因为主要开发人员转移到 angular 团队来开发他们的 i18n 代码。

我也明白现在的i18n doesn't support everything I need right now, see here.

我的问题 - Angular 的最新版本中翻译的播放状态如何？人们是否会推荐其他图书馆，如果确实如此，Angular 本身还没有得到完全支持（无需重新编译即可更改语言）？ ngx-translate 对未来有好处吗？

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

Answer 1

是的。 ngx-translate到现在都很好，希望以后也一样。

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

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

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

Answer 2

在花时间研究这个之后，我想 post 我发现 ngx-translate and Angular-i18n:

之间的主要区别

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

Ocombe (developer of ngx): @josersleal that's exactly what they did, the angular team hired me to improve i18n for everyone But there is no way to integrate my lib directly into the core, after working for 3 months for the core team I can tell you that Angular i18n is much more complex and elaborate than my lib. It handles a lot of more complex stuff, and it does it without all the bugs and shortcomings that my lib has. I understand that it's frustrating that the core doesn't evolve as fast as what a library can do, but there are reasons for that, and the first one is that you cannot implement something and change it whenever you see that you forgot to include a use case. Everything has to be thoroughly planned and thought. Still, you will have most of the things that this lib can do in the core in the future, but it might take a year before we get there unfortunately. The good news is that it's going to be much better than my naive implementation.

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

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

不会用于 5.0，应该是 6.0 之前（所以在 2018 年 3 月之前）。不幸的是我没有更准确的日期
ngx-translate 的开发者（现在是 angular-i18n 的主要贡献者）在 12 天前 post 编辑了这个： https://github.com/angular/angular/issues/20193
这是 i18n 的设计文档（现有技术部分很有趣）： https://docs.google.com/document/d/1LH7lJ1GjRgpGUjzNb6Eg4xrPooRdi80QOTYYh8z_JyY/edit#

一些想法……

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

我也打算看看 Angular-l10n 库，因为它看起来非常好：

Angular-l10n - https://github.com/robisim74/angular-l10n

Answer 3

您可以使用配置文件和语言 json 文件代替 ng-translate 您可以将该 json 文件放在您的服务器位置并从 angular

轻松访问它

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

{ 
  "LANGUAGE": "fr.json" 

}

在 en/fr.json 文件中

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

}

听说是sample code

App.component

export class AppComponent  {

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

或

您可以使用 config.js 文件

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

<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 demo

希望这会有所帮助..！

Angular5个国际化

Angular 5 internationalization

internationalization

angular-i18n

ngx-translate

angular

angular5