Documentación Angular

Angular

Integre i1n con Angular utilizando el SDK de i1n o el modo Bridge con ngx-translate.

Configuración

Ejecute i1n init en su proyecto de Angular. La CLI detecta automáticamente @ngx-translate/core si está presente y configura el formato JSON.

Los archivos de traducción se almacenan en el directorio locales/, compatibles con HttpLoader de ngx-translate.

Modo independiente

Importe init y t desde i1n y utilícelos directamente en sus servicios y componentes de Angular. El SDK de i1n funciona como una alternativa ligera a ngx-translate.

Proporcione t() a través de un servicio de Angular para la inyección de dependencias, o llámelo directamente en las plantillas de los componentes.

Modo puente con ngx-translate

Si su proyecto utiliza ngx-translate, conéctelo con: registerI1n((key, params) => translateService.instant(key, params)). La función t() de i1n delega en ngx-translate mientras proporciona autocompletado con seguridad de tipos.

i1n gestiona los archivos de traducción y la generación de tipos. ngx-translate continúa encargándose de la carga en tiempo de ejecución, el pipe de traducción y el TranslateService. Sus plantillas existentes permanecen sin cambios.

Implementación

Agregue i1n pull a su paso de compilación. Los archivos de traducción generados son compatibles con el formato esperado por ngx-translate.

Para aplicaciones de gran escala, organice las traducciones por módulo de funcionalidad utilizando archivos de namespace.

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

Relacionado