Реализация Angular Translate

Вы можете использовать угловую технику перевода 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 использовал ключевые слова «load» или «submodule» вместо «import», потому что вначале легко спутать импорт ES2015 с импортом NgModule.

Внедрить 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 / активы / i18n / en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am Arthur, I am 42 years old."
}

SRC / активы / 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 мы добавляем заголовок с «директивой» translate внутри тега «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 / активы / i18n / en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old."
}

SRC / активы / 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>

Пример: угловой перевод