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

Метод 1: передача службы перевода в качестве входных данных
Один простой подход — передать службу ngx-translate в качестве входных данных дочернему компоненту. Это позволяет дочернему компоненту напрямую обращаться к функциям перевода. Вот пример:

import { Component, Input } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-modal-child',
  template: `
    <div>{{ translateService.instant('modal.child.content') }}</div>
  `,
})
export class ModalChildComponent {
  @Input() translateService: TranslateService;
}

Метод 2: внедрение службы перевода.
Другой метод – внедрение службы перевода непосредственно в дочерний компонент с использованием механизма внедрения зависимостей Angular. Такой подход устраняет необходимость передавать службу в качестве входных данных. Вот пример:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-modal-child',
  template: `
    <div>{{ translateService.instant('modal.child.content') }}</div>
  `,
})
export class ModalChildComponent {
  constructor(private translateService: TranslateService) {}
}

Метод 3: использование канала перевода
Вы также можете использовать канал перевода ngx-translate в шаблоне модального дочернего компонента. Такой подход упрощает код и позволяет использовать более декларативный синтаксис перевода. Вот пример:

import { Component } from '@angular/core';
@Component({
  selector: 'app-modal-child',
  template: `
    <div>{{ 'modal.child.content' | translate }}</div>
  `,
})
export class ModalChildComponent {}

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