Интернационализация в angular 8 для перевода всего приложения - PullRequest
Новая
       76

Интернационализация в angular 8 для перевода всего приложения

1 голос
/ 01 мая 2020

Я хочу перевести все свое приложение на выбранный язык. У меня есть пример, который использует i18n для перевода. но я не понимаю, как это реализовать в моем приложении.

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

Вы просто следуете моим инструкциям для лучшего понимания.

  1. установите пакет ngx-translate npm в свое приложение. 
npm i @ngx-translate/core --save
теперь нужно установить http-загрузчик 
npm install @ngx-translate/http-loader --save
Теперь вставьте этот код в файл AppModule.ts 
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
          useFactory: myHttpLoader, 
          deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})

export function myHttpLoader(http: HttpClient) {
    return new TranslateHttpLoader(http);
}
Создание файлов перевода для языков (например, хинди, engli sh et c.) В папке / assets / i18n /. 
  //1. first file name: en.json
  { 
    "Title":"Welcome"
  }

  //2. second file name: hi.json
  {
    "Title":"स्वागत हे"
  }

//Note: you can use google translate to convert into any language.
Импорт службы перевода в ваш файл ts компонента. 
import {TranslateService} from '@ngx-translate/core';

export class AppComponent {
  constructor(translate: TranslateService) {
    translate.addLangs(['en', 'hi'])
    translate.setDefaultLang('en');
    translate.use('en');
  }

  //if user on change language
  switchLanguage(language: string) {
    this.translate.use(language);
  }
}
в html файле 
  <p translate>Title</p>

  <button (click)="switchLanguage('en')">English</button>

  <button (click)="switchLanguage('hi')">Hindi</button>

сохранить кодирование. наслаждайтесь!

Я надеюсь, что это полезно для вас. :)

0 голосов
/ 01 мая 2020

В Angular версии 8 я рекомендую использовать пакет ngx-translate . Он имеет гораздо больше функций, чем Angular версии 8, и его довольно просто реализовать. Насколько я помню, он был разработан одним из членов команды для компенсации ограничений i18.

npm install @ngx-translate/core --save

Его довольно легко установить: https://github.com/ngx-translate/core/blob/master/README.md#installation

Для хранения / доступа к переведенным значениям используются файлы .json в качестве пары ключевых значений.

Если вы планируете обновить версию 9 и выше, вам следует взглянуть на официальная документация с тех пор она значительно улучшилась.

...