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))