文档 Angular

Angular

使用 i1n SDK 或 ngx-translate 的 Bridge Mode 集成 i1n 与 Angular。

设置

在您的 Angular 项目中运行 i1n init。CLI 会自动检测是否存在 @ngx-translate/core 并配置 JSON 格式。

翻译文件存储在 locales/ 目录中,与 ngx-translate 的 HttpLoader 兼容。

独立模式

从 i1n 导入 init 和 t,并在你的 Angular 服务和组件中直接使用它们。i1n SDK 可作为 ngx-translate 的轻量级替代方案。

通过 Angular 服务提供 t() 以进行依赖注入,或直接在组件模板中调用它。

使用 ngx-translate 的桥接模式

如果您的项目使用 ngx-translate,请通过以下方式连接它:registerI1n((key, params) => translateService.instant(key, params))。i1n 的 t() 函数会委托给 ngx-translate,同时提供类型安全的自动完成功能。

i1n 管理翻译文件和类型生成。ngx-translate 继续处理运行时加载、translate 管道和 TranslateService。您现有的模板保持不变。

部署

将 i1n pull 添加到您的构建步骤中。生成的翻译文件与 ngx-translate 的预期格式兼容。

对于大型应用程序,请使用命名空间文件按功能模块组织翻译。

src/app/app.component.ts
import { TranslateService } from '@ngx-translate/core';

@Component({
  template: '<h1>{{ "welcome" | translate }}</h1>'
})
export class AppComponent {
  constructor(private translate: TranslateService) {}
}
Bridge Mode — app.module.ts
import { registerI1n } from 'i1n'
import { TranslateService } from '@ngx-translate/core'

// In your AppComponent constructor:
registerI1n((key, params) => this.translate.instant(key, params))

相关