Вы можете использовать угловую технику перевода i18n
Техника перевода i18n
Создать минимальный проект Angular4 Мы используем @ 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
Импортировать необходимые модули в 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);
}
Затем нам нужно импортировать наши модули в @NgModule, это импорт, который говорит Angular загрузить этот модуль в ваш AppModule:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
Это было бы так многопроще, если Angular будет использовать ключевые слова «загрузка» или «субмодуль» вместо «импорт», потому что в начале легко спутать импорт ES2015 с импортом NgModule.
Inject 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».
Перевести простой заголовок иintro
В 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>
Пример: угловой перевод