-2

Estou usando o i18n no angular, como imagem abaixo: inserir a descrição da imagem aqui

No app.component.ts está assim:

import { Component } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public translate : any;
  constructor(translate: TranslateService) {
    translate.addLangs(["pt", "en"]);
    translate.setDefaultLang("pt");
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/pt|en/) ? browserLang : "pt");
  }
}

Para chamar o que está descrito no in8, faço assim no html: <span>{{ 'SISTEMA' | translate }} {{ 'NOME_DO_SISTEMA' | translate }}</span>

No json do inglês está assim:

{
  "NOME_DO_SISTEMA": "from medical clinic",
}

No json do português está assim:

{
  "NOME_DO_SISTEMA": "de clinica médica",
}

Preciso se o usuário mudar a linguagem, muda o arquivo de acordo com a linguagem definida.

Fiz assim:

          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">

            {{ lang }}</option>

        </select>

Mas tem erro conforme imagem. inserir a descrição da imagem aqui

Estou usando @ngx-translate/http-loader.

O que pode ser ?

1 Resposta 1

1

Se o translate não for adicionado ao módulos não tem nem como o serviço iniciar ou reconhece-lo, então no app.modules adicione:

import {TranslateModule} from '@ngx-translate/core';

...

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Deve-se usar o TranslateModule.forRoot(), é como se fosse um "boot", mas claro que este é o caso de uso para "tudo", para usar, você também pode usar para SharedModule que não será compartilhado com tudo, mas será compartilhado aonde for "chamado", como componentes ou "pipes", para adicionar ao SharedModule crie um módulo com um nome qualquer e adicione isto (é apenas um exemplo):

import {TranslateModule} from '@ngx-translate/core';

@NgModule({
    exports: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }

Ou pode usar o LazyLoadModule, como descrito no repositório: https://github.com/ngx-translate/core#lazy-loaded-modules

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .