如何导入已完成的翻译文件

将完成的翻译文件导入到您的应用程序中

有两种方法可以做到这一点：您可以使用JiT（及时）编译器或AoT（Ahead-of-Time）编译器。无论使用哪种方法，您都需要提供Angular编译器

翻译文件
翻译文件格式
区域标识（由ng-xi18n自动生成，可在翻译文件中找到）

使用AoT编译器导入翻译文件

要使AoT（Ahead of time）编译器国际化，您必须：

为每种语言预构建一个单独的应用程序包
确定用户需要哪种语言
服务适当的应用程序包

要预构建独立的应用程序，您必须确保拥有设置AoT所需的工具。有关如何执行此操作的详细信息，请参阅 AoT 食谱。

准备就绪后，使用ngc 命令为编译器提供以下3个选项：

--i18nFile: 翻译文件的路径
--locale:语言环境的名称
--i18nFormat:本地化文件的格式

例如，法语语言命令看起来像这样：

./node_modules/.bin/ngc --i18nFile=./locale/messages.fr.xlf --locale=fr --i18nFormat=xlf

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

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

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

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

app/index.ts :

import { NgModule, TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Hello } from './app.component.ts';
// Using SystemJs' text plugin
import translations from './messages.fr.xlf!text';
const localeId = 'fr';
@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    Hello
  ],
  bootstrap: [ Hello ]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
    { provide: LOCALE_ID, useValue: localeId }
  ]
});

View Example

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