Saltar al contenido

cómo agregar un traductor de idiomas en el ejemplo de código angular 5

Hola, descubrimos la respuesta a tu búsqueda, has scroll y la encontrarás un poco más abajo.

Ejemplo 1: sitio angular en varios idiomas

//Install ngx-translate
$ npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save

//In your app.module.ts:// import ngx-translate and the http loaderimportTranslateLoader,TranslateModulefrom'@ngx-translate/core';importTranslateHttpLoaderfrom'@ngx-translate/http-loader';importHttpClient,HttpClientModulefrom'@angular/common/http';

@NgModule(...
  imports:[...// ngx-translate and the loader moduleHttpClientModule,TranslateModule.forRoot(
            loader:
                provide:TranslateLoader,
                useFactory:HttpLoaderFactory,
                deps:[HttpClient])],...)exportclassAppModule// required for AOT compilationexportfunctionHttpLoaderFactory(http:HttpClient)returnnewTranslateHttpLoader(http);//In the app.component.tsimportComponentfrom'@angular/core';importTranslateServicefrom'@ngx-translate/core';

@Component(
    selector:'app-root',
    templateUrl:'./app.component.html',
    styleUrls:['./app.component.scss'])exportclassAppComponentconstructor(private translate:TranslateService)
        translate.setDefaultLang('en');useLanguage(language: string)this.translate.use(language);//create the JSON file for the English translation: assets/i18n/en.json."demo":"title":"Translation demo","text":"This is a simple demonstration app for ngx-translate"//do the same with another language (for example german)//In the app.component.html<p [translate]="'demo.text'"></p><button(click)="useLanguage('en')">en</button><button(click)="useLanguage('de')">de</button>

Ejemplo 2: sitio angular en varios idiomas

//Installing://Terminal
$ npm install --save-dev angular-translate
//Embed in the html doc<script src="path/to/angular-translate.js"></script>//In the component.tsvar app = angular.module('myApp',['pascalprecht.translate']);

app.config(['$translateProvider',function($translateProvider)
  $translateProvider.translations('en','TITLE':'Hello','FOO':'This is a paragraph');
 
  $translateProvider.translations('de','TITLE':'Hallo','FOO':'Dies ist ein Absatz');
 
  $translateProvider.preferredLanguage('en');]);//In the component.html<h1>'TITLE'</h1><p>'FOO'</p>

Reseñas y puntuaciones

Nos puedes añadir valor a nuestra información aportando tu veteranía en las notas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *