Автоматический переводчик в angular 9?

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

Вот пошаговая инструкция по созданию автоматического переводчика в Angular 9 с использованием ngx-translate:

Шаг 1: Установка ngx-translate

Установите ngx-translate, выполнив следующую команду в терминале вашего проекта:

npm install @ngx-translate/core

Шаг 2: Настройка переводов

Создайте файл перевода, в котором определены все необходимые строки для перевода вашего приложения. Обычно этот файл имеет формат JSON и содержит ключи и значения для каждой строки. Для примера, создайте файл с именем en.json в папке ./src/assets/i18n:

{
  "greeting": "Hello!",
  "farewell": "Goodbye!",
  ...
}

Шаг 3: Создание сервиса для перевода

Создайте новый Angular сервис, который будет отвечать за загрузку и управление переводами. Для этого создайте новый файл translation.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class TranslationService {
  constructor(private translateService: TranslateService) { }

  setDefaultLanguage() {
    // Установка языка по умолчанию
    this.translateService.setDefaultLang('en');
  }

  useLanguage(language: string) {
    // Установка выбранного языка
    this.translateService.use(language);
  }

  getTranslation(key: string) {
    // Получение перевода по ключу
    return this.translateService.instant(key);
  }
}

Шаг 4: Интеграция с компонентами

Расширьте ваш компонент Angular для использования переводов. Импортируйте сервис перевода и добавьте его в конструктор компонента:

import { Component } from '@angular/core';
import { TranslationService } from './translation.service';

@Component({
  ...
})
export class AppComponent {
  constructor(private translationService: TranslationService) { }

  changeLanguage(language: string) {
    // Изменение языка при клике на кнопку
    this.translationService.useLanguage(language);
  }

  getGreetingTranslation() {
    // Получение перевода строки приветствия
    return this.translationService.getTranslation('greeting');
  }

  getFarewellTranslation() {
    // Получение перевода строки прощания
    return this.translationService.getTranslation('farewell');
  }
}

Шаг 5: Использование переводов в шаблоне компонента

Вставьте строки перевода в соответствующие места в шаблоне компонента:

<h1>{{ getGreetingTranslation() }}</h1>
<button (click)="changeLanguage('en')">English</button>
<button (click)="changeLanguage('fr')">French</button>

...

<p>{{ getFarewellTranslation() }}</p>

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