使用JiT Compiler将翻译文件导入到应用程序中

JiT(Just-in-time)编译器在应用程序加载时动态编译应用程序。要做到这一点,我们将需要依靠3个提供者告诉JiT编译器如何翻译特定语言的模板文本:

  • TRANSLATIONS是包含翻译文件内容的字符串。
  • TRANSLATIONS_FORMAT 是文件的格式。
  • LOCALE_ID 是目标语言的区域设置。

以下是如何使用法语的翻译提供商来翻译应用程序。我们假设翻译文件是messages.fr.xlf

app/index.ts:

  1. import { NgModule, TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. import { Hello } from './app.component.ts';
  5. // Using SystemJs' text plugin
  6. import translations from './messages.fr.xlf!text';
  7. const localeId = 'fr';
  8. @NgModule({
  9. imports: [
  10. BrowserModule
  11. ],
  12. declarations: [
  13. Hello
  14. ],
  15. bootstrap: [ Hello ]
  16. })
  17. export class AppModule {
  18. }
  19. platformBrowserDynamic().bootstrapModule(AppModule, {
  20. providers: [
  21. { provide: TRANSLATIONS, useValue: translations },
  22. { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
  23. { provide: LOCALE_ID, useValue: localeId }
  24. ]
  25. });

View Example

我们使用SystemJS文本插件来导入原始xlf文件。 我们可以使用webpack和raw-loader来实现相同的效果。 更好的是,我们可以基于我们感兴趣的语言进行http调用,并在应用程序加载后异步引导应用程序。