Создание мультиязычного приложения NativeScript

Для недавнего проекта мне понадобилось решение для мгновенного переключения языка с Нидерландского на Английский.

В одном концепте на NativeScript я разработал собственное решение на чистом JavaScript с Jed. Оно работало, но было далеко не идеальным.
После этого я решил создать приложение на NativeScript с Angular (2+) и начал поиск существующих библиотек локализации для Angular. Лучшим решением оказалась библиотека ng-translate от Olivier Combe.

В Angular она завелась с полпинка, а вот заставить её работать в NativeScript стоило мне много крови и пота. Но благодаря сообществу вокруг NativeScript и персонально Nathan Walker, мне удалось это сделать. И, в принципе, это было не так сложно.

Вы можете выполнить описанное ниже или же просто скачать готовый пример NSNL_Multilingual с GitHub.

1. Создание приложения на NativeScript и Angular

С помощью следующих команд мы создадим новый проект и добавим в него платформы Android и iOS.

tns create projectname --ng
cd projectname
tns platform add android
tns platform add ios

2. Установка ng2-translate

ng2-translate это пакет npm, поэтому он устанавливается стандартно:
npm install ng2-translate --save

3. Создание языковых файлов

Создадим папку i18n в папке app нашего проекта и добавим файлы nl.json и en.json.
nl.json
{
"EXAMPLE": {
"TITLE": "Hallo wereld!",
"TEXT": "Dit is een zin in het Nederlands.",
"BACK": "Terug"
}
}

en.json
{
"EXAMPLE": {
"TITLE": "Hello world!",
"TEXT": "This is a sentence in English.",
"BACK": "Back"
}
}

4. Отредактируем файл app.module.ts

Здесь нам нужно импортировать следующие модули:
import {NativeScriptHttpModule} from "nativescript-angular/http";
import {TranslateModule, TranslateLoader, TranslateStaticLoader} from "ng2-translate";
import {Http} from "@angular/http";

NativeScript использует AOT компиляцию, поэтому нам нужно экспортировать функцию, которая возвращает TranslateStaticLoader.
// for AoT compilation
export function translateLoaderFactory(http: Http) {
return new TranslateStaticLoader(http, "/i18n", ".json");
};

Также нам нужно расширить импорты @NgModule:
NativeScriptHttpModule,
TranslateModule.forRoot([{
provide: TranslateLoader,
deps: [Http],
useFactory: (translateLoaderFactory)}])

5. Отредактируем app.component.html

Замените содержитое файла app.component.html следующей разметкой.
С помощью неё мы привязываем EXAMPLE.TITLE к тексту в ActionBar, компоненту Label и содержимому TextView.
Также у нас есть кнопки для переключения между Нидерландским и Английским языками. Эти кнопки вызывают функцию changeLanguage при нажатии.










6. Отредактируем app.component.ts

Сначала нам нужно импортировать следующие модули:
import * as Platform from "platform";
import {TranslateService} from 'ng2-translate';

При инициализации мы установим язык по-умолчанию в Нидерландский.
После этого изменим язык, основываясь на предпочитаемом языке на устройстве. В случае, если для такого языка у нас нет файла локализации, ng2-translate вернёт язык по-умолчанию.
constructor(private translate: TranslateService) {
this.translate.setDefaultLang("nl");
this.translate.use(Platform.device.language);
}

Также нам нужна функция для переключения языков:
public changeLanguage(lang: string) {
this.translate.use(lang);
}

Готово! За шесть простых шагов мы создали мультиязычное приложение на NativeScript!

Рекомендую посмотреть более расширенный пример NSNL_Multilingual на GitHub, в котором также используется Angular routing.

*Оригинал взят на NativeScript.nl