使用ngx-translate本地化Angular库。

6

有没有办法使用 ngx-translate 在 Angular 库中处理翻译?我已经尝试了很多方法,但几天来都没有成功。


总有办法,您能否提供更多关于您想要实现的内容的解释? - Mohamed.Karkotly
我认为大多数库都提供重写它们的文本的机会。因此,您必须在库中寻找此功能。 - DerHerrGammler
@DerHerrGammler,我需要实现的只是让我的自定义Angular库拥有自己的翻译,仅此而已。 - Un1xCr3w
各位大佬,可以帮忙一下吗? - Un1xCr3w
只需在您的计算机上输入所需文本,并在主项目中使用它们来处理翻译。 - Никита Середа
显示剩余2条评论
1个回答

12

取决于你希望你的库如何使用以及你对主机应用程序有多少控制。你想在主机应用程序中也强制使用 ngx-translate 吗?还是你想让你的库与 i18n 处理方式无关呢?

选项1)静态翻译在库中
你可以简单地将翻译数据硬编码到你的库中,例如通过自定义翻译加载器或直接通过 translate.setTranslation('lang', {data}) 设置数据。
优点:简单易行,主机应用程序不需要意识到你的库如何在内部处理翻译。
缺点:所有区域数据都嵌入在你的库中,因此总是被加载,主机应用程序没有办法覆盖它们或添加新的区域。

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

...
"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,可供宿主应用程序在模块加载/导入时使用,以向库推送翻译 - 例如服务、自定义注入令牌、forRoot(yourModuleConfig)方法等,然后在您的库中使用它作为翻译数据源(您可以将数据用作ngx-translate的自定义翻译加载器(provide: TranslateLoader,... ),或者完全放弃库中的ngx-translate并使用从宿主接收的翻译。这是许多组件库所做的,例如查看PrimeNG
优点:i18n库不可知,易于文档化和扩展/覆盖,可以删除您的lib的依赖项ngx-translate
缺点:作为库提供者需要更多的工作量,更新过程更加复杂(例如当您的应用程序的新版本定义了一些新的i18n键时,宿主在更新时也必须提供它们)。


你好,非常感谢你的回答,但是我还是有点迷茫。让我告诉你我已经做了什么,然后告诉我该怎么办,因为我尝试了很多方法,但没有一个真正有效。现在我正在尝试实现的方法是在这里发布的: https://festack.blogspot.com/2020/03/angular-how-to-package-translation-ngx.html?ref=morioh.com&utm_source=morioh.com你能帮忙看一下吗?谢谢! - Un1xCr3w
我在控制台中得到了这个错误 zone.js:2863 GET http://localhost:4200/assets/i18n/ar.json 404 (未找到) - Un1xCr3w
1
请查看此StackBlitz(您需要下载并在本地构建)。请检查readme.md以获取信息和说明。总的来说,StackOverflow是一个问答网站,而不是支持论坛,因此不要期望完整的解决方案来完成您的任务。对于选项3-它始终是完全定制的实现,与ngx-translate无关,只需检查任何使用它的公共库,例如我链接的PrimeNG。如果答案有助于解决您的问题,请将其标记为已接受。祝你好运。 - yntelectual
1
如果库中没有主机应用程序所需语言的i18n文件,则基本上有两个选择:a)请求库作者将库本地化为XYZ语言或b)自己提供i18n(在选项2-httploader-中,您可以简单地将“库翻译”添加到您的主机应用程序fr.json,en.json,或者您可以创建新的专用fr.json并将其放置在assets / my-lib / assets / ..中。 - yntelectual
1
非常感谢您的评论,我真的很感激您的意见。 - Un1xCr3w
显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接