Documentos Angular

Angular

Integre o i1n com o Angular usando o SDK do i1n ou o Modo Bridge com ngx-translate.

Configuração

Execute o i1n init em seu projeto Angular. A CLI detecta automaticamente o @ngx-translate/core, se presente, e configura o formato JSON.

Os arquivos de tradução são armazenados no diretório locales/, compatíveis com HttpLoader do ngx-translate.

Modo Independente

Importe init e t do i1n e use-os diretamente em seus serviços e componentes Angular. O SDK do i1n funciona como uma alternativa leve ao ngx-translate.

Forneça t() através de um serviço Angular para injeção de dependência, ou chame-o diretamente em templates de componentes.

Modo Bridge com ngx-translate

Se o seu projeto usa ngx-translate, conecte-o com: registerI1n((key, params) => translateService.instant(key, params)). A função i1n t() delega para ngx-translate enquanto fornece autocompletar com segurança de tipo.

i1n gerencia os arquivos de tradução e a geração de tipos. ngx-translate continua a lidar com o carregamento em tempo de execução, o pipe de tradução e o TranslateService. Seus templates existentes permanecem inalterados.

Implantação

Adicione o i1n pull à sua etapa de build. Os arquivos de tradução gerados são compatíveis com o formato esperado pelo ngx-translate.

Para aplicações grandes, organize as traduções por módulo de funcionalidade usando arquivos 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