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

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

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

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

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

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

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

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 при нажатии.
<ActionBar [title]="'EXAMPLE.TITLE' | translate"></ActionBar>
<ScrollView>
    <StackLayout>
        <Label [text]="'EXAMPLE.TITLE' | translate"></Label>
        <TextView editable="false" [text]="'EXAMPLE.TEXT' | translate"></TextView>
        <Button text="Nederlands" (tap)="changeLanguage('nl')"></Button>
        <Button text="English" (tap)="changeLanguage('en')"></Button>
    </StackLayout>
</ScrollView>


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
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.