Documenti Angular

Angular

Integra i1n con Angular usando l'SDK di i1n o la Modalità Bridge con ngx-translate.

Configurazione

Esegui i1n init nel tuo progetto Angular. La CLI rileva automaticamente @ngx-translate/core se presente e configura il formato JSON.

I file di traduzione sono archiviati nella directory locales/, compatibili con HttpLoader di ngx-translate.

Modalità Autonoma

Importa init e t da i1n e usali direttamente nei tuoi servizi e componenti Angular. L'SDK di i1n funziona come un'alternativa leggera a ngx-translate.

Fornisci t() tramite un servizio Angular per l'iniezione delle dipendenze, oppure chiamalo direttamente nei template dei componenti.

Modalità Bridge con ngx-translate

Se il tuo progetto utilizza ngx-translate, collegalo con: registerI1n((key, params) => translateService.instant(key, params)). La funzione i1n t() delega a ngx-translate fornendo al contempo l'autocompletamento type-safe.

i1n gestisce i file di traduzione e la generazione dei tipi. ngx-translate continua a gestire il caricamento in fase di esecuzione, la pipe di traduzione e il TranslateService. I tuoi template esistenti rimangono invariati.

Distribuzione

Aggiungi i1n pull al tuo passaggio di build. I file di traduzione generati sono compatibili con il formato previsto da ngx-translate.

Per applicazioni di grandi dimensioni, organizza le traduzioni per modulo di funzionalità utilizzando file di 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))

Correlato