Если вы разрабатываете веб-сайты, вы, вероятно, пишете много текста в шаблонах компонентов:

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

Этот файл может быть:

• Файл JSON
• Файл TypeScript

Я опишу плюсы и минусы обоих подходов.

I) Файл переводов JSON

(1) Создайте файл JSON.

В корневом каталоге вашего проекта перейдите в src/assets и создайте новую папку (wording) и файл JSON (wording.json):

? src 
|__ ? assets
|_____ ? wording
|_______ wording.json

И добавьте свои переводы:

{
  "APP": {
    "TITLE": "Movies App",
    "DESCRIPTION": "The best site for movies"
  },
  "COMMON": {
    "BUTTON": "Peek In"
  },
  "MOVIES": {
    "BATMAN": {
      "TITLE": "Batman",
      "SERIES": {
        "THE_DARK_KNIGHT": {
          "TITLE": "The Dark Knight Series",
          "MOVIES": {
            "BATMAN_BEGINS": {
              "TITLE": "Batman Begins",
              "DESCRIPTION": "Bruce learns the art of fighting to confront injustice."
            },
            "THE_DARK_KNIGHT": {
              "TITLE": "The Dark Knight",
              "DESCRIPTION": "Lorem Ipsum"
            },
            "THE_DARK_KNIGHT_RISES": {
              "TITLE": "The Dark Knight Rises",
              "DESCRIPTION": "Lorem Ipsum"
            }
          }
        }
      }

    }
  }
}

(2) Обновить TSConfig

При необходимости добавьтеsolveJsonModule: true в tsconfig.json compilerOptions, чтобы разрешить импорт файлов JSON в модули ECMAScript:

{
  "compilerOptions": {
    "resolveJsonModule": true, // Add this line to tsconfig.json
  }
}

(3) Используйте файл JSON.

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

// component file
import wording from '../../assets/wording/wording.json';

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  ngOnInit(): void {
    this.pageText = wording.MOVIES.BATMAN;
  }

}

Или создайте сервис, который импортирует все слова по всему миру:

// translations.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TranslationsService {

  public wording!: any;

  constructor(private http: HttpClient) {
    this.setTranslations();
  }

  private setTranslations() {
    this.http.get('./assets/wording/wording.json').subscribe(data => {
      this.wording = data;
     });
  }

}

А затем внедрите сервис в свой компонент.

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  constructor(private readonly translationsService: TranslationsService) {}

  ngOnInit(): void {
    this.pageText = this.translationsService.wording.MOVIES.BATMAN;
  }

}

Однако недостатком этого подхода является то, что у вас нет никакого интеллекта для текстового контента.

  

    {{ pageText.TITLE }}
    
    
{{ pageText.HELLO_WORLD }}
  

Чтобы решить эту проблему, вам придется создать собственный тип или интерфейс для всего файла wording.json или конкретного объекта («Бэтмен»), который вы используете в компоненте.

II) Файл переводов TypeScript

Другой способ сделать это — отказаться от файла JSON и создать вместо него файл Typescript.

(1)

Создайте новый файл wording.ts в любом месте src/app

// wording.ts
const WORDING = {
  APP: {
    TITLE: 'Movies App',
    DESCRIPTION: 'The best site for movies',
  },
  COMMON: {
    BUTTON: 'Peek In',
  },
  MOVIES: {
    BATMAN: {
      TITLE: 'Batman',
      SERIES: {
        THE_DARK_KNIGHT: {
          TITLE: 'The Dark Knight Series',
          MOVIES: {
            BATMAN_BEGINS: {
              TITLE: 'Batman Begins',
              DESCRIPTION:
                'Bruce learns the art of fighting to confront injustice.',
            },
            THE_DARK_KNIGHT: {
              TITLE: 'The Dark Knight',
              DESCRIPTION: 'Lorem Ipsum',
            },
            THE_DARK_KNIGHT_RISES: {
              TITLE: 'The Dark Knight Rises',
              DESCRIPTION: 'Lorem Ipsum',
            },
          },
        },
      },
    },
  },
};

export default WORDING;

(2) Создайте класс, который читает из этого файла.

Вы можете импортировать новый файл wordings.ts в любой желаемый компонент. Однако мне нравится создавать собственный класс (UseWording), который читает из этого файла.

// use-wording.ts

import WORDING from './wording';

/**
 * Wrapper for translation wording
 */
export default class UseWording {

  get useWording() {
    return WORDING
  }
}

(3) Инициализируйте класс UseWording в ваших компонентах.

import { Component } from '@angular/core';
import UseWording from '../../../shared/translations/use-wording';

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN
}

Благодаря этому вы сразу сможете увидеть intellisense в шаблоне.

Кроме того, вы можете создать дополнительные свойства класса, ориентированные на определенные ключи в объекте формулировки:

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN;
  readonly movies = this.useWording.MOVIES.BATMAN.SERIES.THE_DARK_KNIGHT.MOVIES;
  readonly common = this.useWording.COMMON;
}

  

    {{ pageText.TITLE }}
    
{{ pageText.SERIES.THE_DARK_KNIGHT.TITLE }}
  

  

    

      
{{ movies.BATMAN_BEGINS.TITLE }}
      

        {{ movies.BATMAN_BEGINS.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      
{{ movies.THE_DARK_KNIGHT.TITLE }}
      

        {{ movies.THE_DARK_KNIGHT.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      

        {{ movies.THE_DARK_KNIGHT_RISES.TITLE }}
        

          {{ movies.THE_DARK_KNIGHT_RISES.DESCRIPTION }}
        
        {{ common.BUTTON }}
      
    
  

Обратите внимание: если ваш компонент класса вводит зависимости через конструктор, конструктор должен содержать «супер» вызов.

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    super(); // 



И, как и в случае с JSON, если вам нужно изменить заголовок или описание, вы делаете это в одном месте (wording.ts), а не меняете несколько файлов/компонентов.


  
  
  Подведение итогов


В этой статье демонстрируются два способа использования формулировок в компонентах Angular. Оба метода имеют свои преимущества и недостатки.

Использование файла TypeScript ускоряет работу и заботится о IntelliSense, но может не подходить для работы с несколькими языками.

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

Если вы узнали что-то новое, не забудьте нажать кнопку «Подписаться». Также подписывайтесь на меня в Твиттере, чтобы быть в курсе моих предстоящих материалов.

А сейчас до свидания ?