Angular

Интегрируйте i1n с Angular, используя i1n SDK или Bridge Mode с ngx-translate.

Настройка

Запустите i1n init в вашем проекте Angular. CLI автоматически обнаружит @ngx-translate/core, если он присутствует, и настроит формат JSON.

Файлы перевода хранятся в директории locales/, совместимы с HttpLoader ngx-translate.

Автономный режим

Импортируйте init и t из i1n и используйте их напрямую в ваших Angular сервисах и компонентах. i1n SDK работает как легкая альтернатива ngx-translate.

Предоставьте t() через службу Angular для внедрения зависимостей или вызывайте ее напрямую в шаблонах компонентов.

Режим моста с 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))

Связанное