有没有办法使用 ngx-translate 在 Angular 库中处理翻译?我已经尝试了很多方法,但几天来都没有成功。
有没有办法使用 ngx-translate 在 Angular 库中处理翻译?我已经尝试了很多方法,但几天来都没有成功。
取决于你希望你的库如何使用以及你对主机应用程序有多少控制。你想在主机应用程序中也强制使用 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/"
}
],
...
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './your-cool-lib/assets/i18n/', '.json');
}
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键时,宿主在更新时也必须提供它们)。