Documents Angular

Angular

Intégrez i1n avec Angular en utilisant le SDK i1n ou le mode Bridge avec ngx-translate.

Configuration

Exécutez i1n init dans votre projet Angular. Le CLI détecte automatiquement @ngx-translate/core s'il est présent et configure le format JSON.

Les fichiers de traduction sont stockés dans le répertoire locales/, compatibles avec HttpLoader de ngx-translate.

Mode autonome

Importez init et t depuis i1n et utilisez-les directement dans vos services et composants Angular. Le SDK i1n fonctionne comme une alternative légère à ngx-translate.

Fournissez t() via un service Angular pour l'injection de dépendances, ou appelez-le directement dans les modèles de composants.

Mode pont avec ngx-translate

Si votre projet utilise ngx-translate, connectez-le avec : registerI1n((key, params) => translateService.instant(key, params)). La fonction i1n t() délègue à ngx-translate tout en offrant une complétion automatique type-safe.

i1n gère les fichiers de traduction et la génération de types. ngx-translate continue de gérer le chargement à l'exécution, le pipe translate et le TranslateService. Vos modèles existants restent inchangés.

Déploiement

Ajoutez i1n pull à votre étape de build. Les fichiers de traduction générés sont compatibles avec le format attendu par ngx-translate.

Pour les grandes applications, organisez les traductions par module de fonctionnalité en utilisant des fichiers d'espace de noms.

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

Associé