多种语言 - Angular 中相同语言的文件

Question

我使用的是 Angular 5。默认情况下，i18n 翻译文件全部存储在一个文件夹中。

问题是，我需要使用另一个项目提供的“基本”翻译文件，除此之外，我想为开发过程中出现的所有其他翻译添加第二个翻译文件。像这样的东西：

有没有办法拥有可用于同一种语言的多种语言文件？

Answer 1

您可以使用Angular i18n 合并文件。

运行：

npx ng-i18n-merge-files -f xlf

它会在同一文件夹中生成以下文件，其中包含合并的内容：

messages.de.xlf
messages.en.xlf
messages.fr.xlf
messages.nl.xlf
messages.pt.xlf
messages.ru.xlf

Answer 2

Angular 翻译由具有抽象 getTranslation 方法的 TranslateLoader 加载。使用 TranslateHttpLoader 从资产中读取翻译是很常见的。

这是一个例子：

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json?cacheBuster=' + new Date().getTime());
}

要使用多个文件的翻译，您可以 forkJoin 请求并将响应映射到单个翻译文件中。 我还提供了一个有关如何更改目录路径的示例，即使对我来说路径是相同的。

export class CustomTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient, private config: { uiPath: string; libPath: string }) {
  }

  public getTranslation(lang: string): Observable<any> {
    const uiUrl = `${this.config.uiPath}/${lang}.json`;
    const libraryUrl = `${this.config.libPath}/${lang}-map.json`;
    const suffix = '?cacheBuster=' + new Date().getTime();

    return forkJoin({
      uiTranslations: this.http.get(`${uiUrl}${suffix}`),
      libTranslations: this.http.get(`${libraryUrl}${suffix}`),
    }).pipe(
      map(response => ({...response.libTranslations, ...response.uiTranslations}))
    );
  }
}

export function HttpLoaderFactory(http: HttpClient) {
  return new CustomTranslateLoader(http, {
    uiPath: './assets/i18n',
    libPath: './assets/i18n',
  });
}