Переведите Angular 6 приложений с помощью ngx-translate
Что мы будем делать:
Создание минимального проекта Angular6
Установите и загрузите ngx-translate
Init the TranslateService
Создание файлов перевода .json
Перевести простое название и вступление
Интегрируйте переключатель языка
Перевести предложение с переменной
Использование вложенных объектов .json
Создание минимального проекта Angular6
Мы используем @ angular / cli для создания нового проекта под названием «traduction» в терминале:
ng new traduction --prefix tr
cd traduction
ng serve -o
Установить и загрузить ngx-translate
Используйте npm в вашем терминале в папке проекта «traduction»:
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader
Примечание:
Используйте следующие версии для угловых ниже 6
"@ngx-translate/core": "^9.1.1"
"@ngx-translate/http-loader": "^3.0.1"
и для угловых 5 используйте последнюю версию 10 и выше
Импорт необходимых модулей в app.module.ts:
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
Добавьте функцию, которая возвращает «TranslateHttpLoader» и экспортируйте ее (необходимо для AoT). В этом случае созданная нами функция HttpLoaderFactory возвращает объект, который может загружать переводы с использованием Http и .json, но вы можете написать свой собственный класс, который, например, использует глобальную переменную JavaScript вместо загрузки файла или использует Google Translate:
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
OR
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
Затем нам нужно импортировать наши модули в @NgModule, это импорт, который говорит Angular загрузить этот модуль в ваш AppModule:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
Ввести TranslateService
В «app.component.ts» мы теперь запускаем «TranslateService», мы импортируем TranslateService:
import { TranslateService } from '@ngx-translate/core';
Затем внутри класса AppComponent мы внедряем сервис и определяем язык по умолчанию. И чтобы быть готовым к следующему шагу, мы добавляем функцию для переключения языка.
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
}
switchLanguage(language: string) {
this.translate.use(language);
}
Создание файлов перевода .json
Теперь мы создаем наши файлы перевода в папке assets / i18n:
src/assets/i18n/en.json
{
"Title": "Translation example",
"Intro": "Hello I am Arthur, I am 42 years old."
}
src/assets/i18n/fr.json
{
"Title": "Exemple de traduction",
"Intro": "Bonjour je m'appelle Arthur, j'ai 42 ans."
}
Это простые файлы .json, которые будут загружены нашим «TranslateHttpLoader», который мы создали в «app.module.ts».
Перевести простое название и вступление
В app.component.html мы добавляем заголовок с переводной «директивой» внутри тега «h1». Эта директива будет брать текст внутри тега и заменять его соответствующим переводом. Если вы используете директиву, вы должны убедиться, что внутри тега нет ничего, кроме текста.
В качестве второго примера мы используем «TranslationPipe», чтобы перевести метку с define в качестве встроенной строки. Поскольку у нас иногда есть значение внутри перевода, который мы хотим заменить, мы можем передать объект данных в канал «translate».
<h1 translate>Title</h1>
<div>
{{ 'Intro' | translate:user }}
</div>
Встроенный переключатель языка
Теперь мы можем прикрепить функцию переключения языка, которую мы видели выше в app.component.ts, к кнопке. В этом случае мы создаем кнопку для каждого языка и вызываем функцию switchLanguage () с соответствующей языковой клавишей.
<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>
Перевести предложение с переменной
Как упоминалось ранее, у вас иногда есть предложения, содержащие переменную. В этом небольшом примере у нас есть пользовательский объект с возрастом и именем внутри «app.component.ts», и мы хотим перевести предложение, которое будет содержать следующие значения:
...
export class AppComponent {
user = {
name: 'Arthur',
age: 42
};
...
}
Поскольку мы передаем этот объект в канал «translate», теперь мы можем использовать его свойства в нашем переводе с нотацией {{placeholder}}.
src/assets/i18n/en.json
{
"Title": "Translation example",
"Intro": "Hello I am {{name}}, I am {{age}} years old."
}
src/assets/i18n/fr.json
{
"Title": "Exemple de traduction",
"Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans."
}
Использование вложенных объектов .json
Если вы хотите иметь больший контроль над своим переводом и, например, переводить блоки страниц (с точки зрения конечного пользователя) или компоненты (с точки зрения разработчика), одним из решений может быть следующее; используйте вложенные объекты .json, как описано в репозитории git. Пример может выглядеть так в файлах -json:
{
"Title": "Translation example",
"Intro": "Hello I am {{name}}, I am {{age}} years old.",
"Startpage": {
"TranslationSections": "Hello World"
},
"Aboutpage": {
"TranslationSections": "We are letsboot"
}
}
{
"Title": "Exemple de traduction",
"Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
"Startpage": {
"TranslationSections": "Bonjour Monde"
},
"Aboutpage": {
"TranslationSections": "Nous sommes letsboot"
}
}
и в соответствующем шаблоне:
<h1 translate>Title</h1>
<div>
{{ 'Intro' | translate:user }}
</div>
<div>
{{ 'Startpage.TranslationSections' | translate }}
</div>
<div>
{{ 'Aboutpage.TranslationSections' | translate }}
</div>
<br/>
<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>