В современном обширном цифровом мире веб-разработчики стремятся связаться с глобальной аудиторией. Ключевая стратегия достижения этой цели — превратить ваше приложение Angular в многоязычное приложение. Добро пожаловать в Интернационализацию (i18n), где ваше приложение может общаться с пользователями на их родных языках, где бы они ни находились. В этом блоге мы углубимся в интеграцию i18n в ваш проект Angular, чтобы ваше приложение было доступным и удобным для пользователей по всему миру.

Введение в интернационализацию (i18n) в Angular

Представьте свое веб-приложение как мост, соединяющий пользователей со всего мира. Чтобы создать гостеприимный и удобный интерфейс для всех, важно общаться на их языке. Интернационализация (i18n) – это ключ к адаптации вашего приложения к различным языкам и регионам. Angular предлагает надежные инструменты и функции, которые помогут вам в этом.

Настройка нового проекта Angular

Прежде чем мы начнем наше путешествие по i18n, давайте создадим новый проект Angular.

ng new i18n-app

Вы можете использовать следующую команду, чтобы начать новый проект Angular с помощью Angular CLI. В процессе установки вы можете настроить свой проект, включая такие параметры, как включение маршрутизации Angular и выбор формата таблицы стилей (например, CSS, SCSS). Обязательно выберите настройки, соответствующие требованиям вашего проекта.

Установка и настройка инструментов Angular i18n

1. Чтобы начать наше путешествие по i18n, нам понадобятся подходящие инструменты. Мы установим и настроим инструменты Angular i18n, чтобы сделать наше приложение многоязычным.

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

1. После установки ngx-translate мы можем импортировать его в наш модуль Angular или конфигурацию и настроить службу перевода:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Если вы используете файл app.config, просто замените NgModule следующим кодом:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

В этом коде мы импортируем необходимые модули ngx-translate и настраиваем загрузчик перевода с помощью функции HttpLoaderFactory. Функция HttpLoaderFactory использует модуль HttpClient для асинхронной загрузки файлов перевода с сервера.

Создание файлов перевода

После настройки службы перевода мы можем создавать файлы перевода для каждого языка, который хотим поддерживать. Файлы перевода — это файлы JSON, которые сопоставляют ключи с переведенными строками.

Создайте файлы с нужным кодом языка в качестве имени и добавьте к ним переводы.

Например, вот файл перевода на английский язык:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

А вот файл перевода на немецкий язык:

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

Вот структура папок и имена файлов.

Примечание: В файлах перевода используются одни и те же ключи, но с разными значениями для каждого языка. Это упрощает переключение между языками в нашем приложении без изменения кода.

Использование переводов в шаблонах

Когда наши файлы перевода готовы, мы можем интегрировать их в наши шаблоны Angular. Первый шаг — внедрить службу перевода в наш компонент:

App.comComponent.ts :

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

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

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

В этом коде мы внедряем TranslateService в наш компонент и устанавливаем английский язык в качестве языка по умолчанию. Мы также определяем метод TranslateLanguage, который позволяет нам менять язык приложения.

Создать компонент для языкового перевода

ng g c LanguageTranslation

После создания компонента мы можем использовать Службу перевода для перевода между несколькими языками.

LanguageTranslation.comComponent.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

LanguageTranslation.comComponent.html

{{ "title" | translate }}


    English
    German

В этом коде мы создаем LanguageTranslationComponent, который внедряет TranslateService и предоставляет две кнопки для переключения между английским и немецким языками. При нажатии кнопки мы вызываем метод TranslateLanguage в TranslateService с соответствующим кодом языка.

Примечание: При использовании this.translate.use('DE') убедитесь, что используется правильный код языка, поскольку он чувствителен к регистру, и убедитесь, что имя файла является точным.

Заключение:

Интернационализация является ключевым элементом современной разработки программного обеспечения, и Angular предлагает надежные инструменты для создания многоязычных приложений. Благодаря библиотеке ngx-translate реализация i18n в Angular становится проще и адаптируемее.

В этой статье мы рассмотрели, как использовать ngx-translate для создания файлов перевода, применения переводов в шаблонах и переключения языков в приложении Angular. Следуя этим рекомендациям, вы сможете легко создать многоязычное приложение, доступное пользователям по всему миру.

Спасибо!

Если у вас есть вопросы, оставляйте комментарии