使用 ngx-translate 本地化角度库

Question

有没有办法创建一个角度库并使用 ngx-translate 处理库内的翻译？这几天我尝试了很多方法但没有成功

Answer 1

取决于您打算如何使用库以及您对主机应用程序的控制权。您想在主机应用程序上也强制使用 ngx-translate 吗？或者您希望您的库不知道 i18n 的处理方式？

选项 1) lib 中的静态翻译
您可以简单地将翻译数据硬编码到您的库中，例如通过自定义翻译加载器或直接通过translate.setTranslation('lang', {data}).
优点：简单，主机应用程序不需要知道您的库如何在内部处理翻译
缺点：所有语言环境数据都嵌入在您的库中，因此始终加载，主机应用程序无法覆盖它们或添加新的语言环境。

选项 2）翻译打包在 lib 资产中
您可以将翻译文件作为资产与 lib 一起分发。不确定 Angular 构建器是否已经支持这一点，在过去，您需要首先构建库，然后添加资产 la: "build-lib": "ng build portal-lib --prod && cp -R /src/assets/ dist/your-cool-lib/assets",。
然后，您可以指示主机应用程序将您的 lib 资源添加到 angular.json 中的资源数组中。例如：

...
"assets": [
   "src/favicon.ico",
   "src/assets",
   {
     "glob": "**/*",
     "input": "node_modules/your-cool-lib/assets/",
     "output": "/your-cool-lib/assets/"
   }
],
...

然后，您的 lib 仍然可以使用 ngx httpTranslationLoader 并简单地告诉它您希望在哪里找到翻译：

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './your-cool-lib/assets/i18n/', '.json');
}

如果主机应用程序本身使用 ngx-translate，那么您需要可以使用ngx-translate-multi-http-loader和配置它，例如：

export function createTranslateLoader(http: HttpClient) {
 return new MultiTranslateHttpLoader(http, [
    { prefix: './assets/i18n/', suffix: '.json' },//host app i18n assets
    { prefix: './your-cool-lib/assets/i18n/', suffix: '.json' }, //your lib assets
  ])
}

优点：您只加载实际使用的语言的资源，您可以添加和覆盖 i18n 数据，如果您还控制/影响主机应用程序，并且您在任何地方都使用 ngx-translate，那么这很有用。
缺点：更复杂的设置，主机必须执行额外的配置才能完成这项工作，您必须决定是否要隔离模块的翻译，是否要在主机应用程序上强加 ngx-translate

选项 3）让主机在模块加载期间传递翻译
其他常见方法是公开一些自定义 API，主机应用程序可以使用这些 API 在模块加载/导入时将翻译推送到库 - 例如服务、自定义注入令牌、 forRoot(yourModuleConfig) 方法等，然后您在库中将其用作翻译数据源（然后您可以将数据用作provide: TranslateLoader,... ngx-translate 的自定义翻译加载器（），或者您可以完全放弃库中的 ngx-translate并使用从主机收到的翻译。这是由许多组件库完成的，例如检查PrimeNG
优点：与 i18n 库无关，易于记录和扩展/覆盖，您可以删除 ngx-translate 作为库的依赖项
缺点：需要更多的努力作为 lib 提供者，更新过程更复杂（例如，当您的应用程序的新版本定义了一些新的 i18n 密钥时，主机在更新时也必须提供它们）