angular - 使用 ngx-translate 本地化 Angular 库

Question

有没有办法创建一个 Angular 库，并使用 ngx-translate 处理库内的翻译？在过去的几天里，我一直在尝试很多方法，但都没有成功

Answer 1

取决于您打算如何使用您的库以及您对主机应用程序的控制权。你想对主机应用程序也施加 ngx-translate 吗？或者您希望您的库不知道 i18n 的处理方式？
选项 1) lib 中的静态翻译
您可以简单地将翻译数据硬编码到您的库中，例如通过自定义翻译加载器或通过 translate.setTranslation('lang', {data}) 直接设置数据.
优点:简单，宿主应用程序不需要知道你的库如何在内部处理翻译
缺点:所有语言环境数据都嵌入在您的库中，因此始终加载，主机应用程序无法覆盖它们或添加新的语言环境。
选项 2) 打包在 lib Assets 中的翻译
您可以将您的翻译文件作为 Assets 与您的库一起分发。不确定 angular builder 是否已经支持这个，过去你需要先构建 lib，然后添加 Assets : "build-lib": "ng build portal-lib --prod && cp -R /src/assets/ dist/your-cool-lib/assets", .
然后，您可以指示主机应用程序将您的库 Assets 添加到 angular.json 中的 Assets 数组。例如:

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

然后你的库仍然可以使用 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 在模块加载/导入时将翻译推送到库 - 例如服务、自定义注入(inject) token 、forRoot(yourModuleConfig) 方法等，然后您在库中将其用作翻译数据的来源(然后您可以将数据用作 ngx-translate 的自定义翻译加载程序( provide: TranslateLoader,... )，或者您可以完全放弃你的库中的 ngx-translate 并使用你从主机收到的翻译。这是由许多组件库完成的，例如检查 PrimeNG
优点:i18n lib 不可知，易于记录和扩展/覆盖，您可以删除 ngx-translate 作为您的 lib 的依赖项
缺点:作为 lib 提供者，您需要付出更多努力，更新过程更复杂(例如，当您的应用程序的新版本定义了一些新的 i18n key 时，主机在更新时也必须提供它们)