如何通过按模块或按页面分离翻译文件来实现 Angular v11 项目中的国际化

我正在研究一个示例项目，但很明显，你正在用翻译文件的大小来换取合并各种翻译文件和/或同步多个实例的开销TranslateService。

总结：这是个坏主意。文档建议采用集中式方法（仅具体提到使用文件夹来分组翻译文件，但暗示所有翻译文件都应该在那里）：

我们建议使用或文件夹i18n内的文件夹将您的翻译文件组织在一个地方。assetspublic

关于您担心的“单个文件最终会变得很大且令人困惑”，文档的管理翻译部分介绍了一种简化编辑的方法。我没有将它包括在我的答案中，因为它推广了特定的（付费）产品。

此外，文档的为什么 [...] 上下文 ID [...]部分建议使用嵌套的翻译定义，以便按代码库中以开发人员为中心的方面（如页面、模块、组件或功能）进行分组，从而使组织（以及查找）翻译更容易：

{
  "app": {
    "language": "current language",
    "settings": "Application settings",
    "log-out": "Log out"
  },
  "product-page": {
    "call-to-action": "Sign up today!",
    "pricing": "pricing",
    "license-notice": "Licenses are per-user and subject to certain terms",
    "terms-of-license": "license terms"
  },
  "print-feature": {
    "header": "Printing has never been so easy",
    "from-dialog": {
      "header": "Intuitive dialogs guide users through the printing process",
      "legal": "All dialogs conform to WCAG 2 standards"
    },
    "from-shortcuts": {
      "header": "Keyboard shortcuts are provided for power users",
    }
  },
}

但如果你确实想这样做......

在默认使用情况下，每个 实例都会TranslateService打开一个<lang>.json文件。如果您希望<lang>.json每个模块/组件都有一个文件，则您需要手动将该模块/组件的翻译文件中的翻译添加到现有 已知的翻译键中，或者您需要为模块/组件的翻译文件TranslateService创建一个新的 实例。TranslateService

第一种方法应该可以使用，setTranslation但是您必须将<lang>.json文件加载到内存中并将其解析为InterpolatableTranslationObject您自己的文件。

我不确定这种方法是否能按预期工作，您可能会遇到一些问题（可能必须手动触发变化检测，可能必须手动切换语言并返回当前语言以触发重新翻译，可能必须推迟加载组件直到当前模块/组件完成修补其翻译等），我不知道。

但粗略的草图可能是这样的：

import { Component } from '@angular/core';
import { InterpolatableTranslationObject, TranslateService } from '@ngx-translate/core';

// This component should be loaded at the root of this
// feature module so that translations for the components
// in this module can be patched.
@Component({ /*...*/ })
export class FooModuleRootComponent { 

  // The `HttpClient` instance can be provided by the application
  // because we don't have any specific requirements.
  // The `TranslateService` instance is also provided by the
  // application so that we have a single source of truth for
  // setting the current language and getting translations for
  // the current language.
  constructor(
    private readonly http: HttpClient,
    private readonly translateService: TranslateService
  ) {
    this.appendTranslations('en');
    this.appendTranslations('es');
  }

  /**
   * Fetches this module's translation file for the provided language
   * and appends the contained translations to the current translation
   * service.
   */
  appendTranslations(lang: string) {
    // InterpolatableTranslationObject and the child InterpolatableTranslation
    // can be reduced to effective aliases for `Record<string, string | string[]>` and
    // `string` respectively, so we should be fine to choose to type the raw JSON
    // response as `InterpolatableTranslationObject` here. 
    // This assumes simple use cases.
    this.http.get<InterpolatableTranslationObject>(`path/to/feature/${lang}.json`).subscribe({
      next: translations => {
        // The last parameter (shouldMerge) must be true or this will overwrite
        // the translations loaded elsewhere.
        this.translateService.setTranslation(lang, translations, true);
      },
    });
  }
}

您也可以尝试按照daniel-sc的回答在 Angular 中更新/合并 i18n 翻译文件。

一个替代/新的解决方案（针对未维护的 ngx-i18nsupport）是https://github.com/daniel-sc/ng-extract-i18n-merge

通过安装后

ng add ng-extract-i18n-merge

翻译将被提取并与命令合并：

ng extract-i18n

第二种方法需要元服务（或更可能是注入令牌）来同步多个实例，这TranslateService对我来说是一个直接的危险信号，表明这不是一个好方法。除非这是最后的选择，否则我不会尝试它。