Локализация в угловых приложениях с использованием RXWeb

Автор оригинала: Ushmi Dave.

Локализация в угловой приложении может повысить свою эффективность для решения деловых проблем, поскольку она помогает программному обеспечению прикрепить людей через их локаль или язык

Переведенные приложения имеют возможность сосредоточиться на пользователях, имеющих разные языки, культуру и место. В этой статье я собираюсь обсудить реализацию интернационализации в угловых приложениях, используя @ rxweb/translate

1. Уход за двумя основными факторами: ремонтопригодность и последовательность
2. Сохранение исходного кода и шатулы перевода отдельно
3. Во всем мире разрешается переведенные данные, настройка языка по умолчанию и добавление языков
4. После правильной практики и стандартов кодирования

Давайте начнем, установив пакет

NPM установить @ rxweb/translate

Регистрация модуля:

Импортируйте сгенерированный перевод в приложение. Module.ts, как показано ниже:

Для модуля в приложении импортируют TranslateModule а также app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { RxWebModule } from './rxweb.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
     RxTranslateModule.forRoot({  
      cacheLanguageWiseObject: true,
      globalFilePath: "assets/i18n/{{language-code}}/global.{{language-code}}.json",
      filePath: "assets/i18n/{{language-code}}/{{translation-name}}.{{language-code}}.json"})
  ],
  providers: [RxTranslateModule],
  exports: [RxTranslateModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Файл rxtranslatemodule содержит свойства с их использованием, как показано ниже:

1. CACHELANGUAGESOBJECT : Установите это правда Поддерживать кеш клавиш перевода для повышения производительности.
2. GlobalFilePath : Установите глобальный файл перевода для разрешения Компонент объектов глобального перевода Мудрый или, например: для EN (Global.en.json)
3. FilePath : Установите путь к файлу для разрешения объектов перевода в каждом модуле в отношении его названия перевода, например: для входа в систему (login.en.json)

Разрешите глобальную перевод данных:

В компоненте приложения разрешается @Translate Декоратор объект, чтобы получить переведенные глобальные данные

app.component.ts:

import { Component } from '@angular/core';
import { translate } from '@rxweb/translate';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   @translate() global: any;
}

Связывать текст:

Свяжите текст на основе разрешенного объекта в компоненте приложения, используя два пути привязки (интерполяции), используемые в угловом угловом

app.component.html:

{{global.Title}}

Форма json:

Объекты перевода разрешаются от глобального пути файла, а структура файлов JSON так, как показано ниже:

Формирование JSON в файлах в качестве клавиш на основе многоязычного контента, который вы хотите. Покажите, например, вы переводите свой контент на два языка (ru и fr), то заголовок будет сформирован как:

Выход:

Вот выход вышеуказанного кода. Полный базовый пример можно посмотреть на штабблиц

Разрешить данные перевода на основе компонентов

В компоненте разрешается @Translate декоратор объект, чтобы получить перевод Данные, основанные на названии перевода, вот пример компонента входа в систему, так что здесь название перевода будет авторизоваться

login.component.ts.

import { Component, OnInit } from '@angular/core';
import { translate, RxTranslation } from '@rxweb/translate';

@Component({
  selector: 'app-login-component',
  templateUrl: './login-component.component.html',
  styleUrls: ['./login-component.component.css']
})
export class LoginComponent implements OnInit {
  @translate({translationName:'login'}) login: any;
  constructor(){

  }
}

Связывать текст:

Свяжите текст на основе разрешенного объекта в компоненте входа в систему, используя то же самое, что и глобальный перевод, используя объект входа в систему

app.component.html:

    

        {{login.emailLabel}}
        
        {{login.emailNoteText}}
    
    

        {{login.passwordLabel}}
        
    
    

        
        {{login.checkOutText}}
    
    {{login.submitText}}

Форма json:

Объекты перевода разрешаются из пути файла, а структура файлов JSON является ниже: формирование JSON в файлах в качестве клавиш на основе многоязычного контента, который вы хотите. Покажите, например, вы переводите свой контент на два языка (ru и fr), то заголовок будет сформирован как:

Выход:

Вот выход компонента входа в систему, как показано ниже:

• Простой, поддерживаемый и читаемый код перевода. • Ленивый компонент контента трансляции нагрузки с угловой предварительной нагрузкой. • Перевод языка по URL или код. • Перевод сообщения об ошибке FormControl. Мощные CLI с особенностями ключевой добычи, оптимизировать JSON и т. Д.

Получить реализацию всех функций RXWeb Translate в документы