Документация

Angular

Как использовать Magic Translate в приложениях Angular. Для клиента Angular требуется Angular 20 или новее, и он работает как с zone.js, так и без него.

инсталляция

Установите клиент Angular для Magic Translate в своем приложении.

# using npm
npm i @magic-translate/angular


# using yarn
yarn add @magic-translate/angular

Затем добавьте provideMagicTranslate в конфигурацию приложения.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideMagicTranslate, Language } from '@magic-translate/angular';


export const appConfig: ApplicationConfig = {
  providers: [
    provideMagicTranslate({
      apiKey: '<your-api-key>',
      language: Language.DE // any supported language
    })
  ]
};

Если у вас еще нет ключа API, зарегистрируйтесь на Magic Translate, чтобы получить его.

Теперь вы можете использовать компонент <t> в любом импортирующем его компоненте.

import { Component } from '@angular/core';
import { T } from '@magic-translate/angular';


@Component({
  selector: 'app-welcome',
  imports: [T],
  template: `<h1><t>Please translate me!</t></h1>`
})
export class Welcome {}

Вот и все. Теперь ваше приложение можно перевести более чем на 70 языков.

Конфигурация

provideMagicTranslate принимает следующие варианты:

ОпцияОписание
apiKeyОбязательно. Ваш ключ API Magic Translate.
languageТребуется. Язык, на который переводится ваш контент, например 'de'.
sourceLanguageЯзык, на котором написаны ваши шаблоны. Он обнаруживается автоматически, поэтому устанавливайте его только в том случае, если обнаружение дает неверные результаты.
formality'formal' или 'informal'. Поддерживается не на всех языках. Его можно переопределить для каждого перевода.
debugЗаписывает запросы в консоль.

Смена языков

Внедрите сервис MagicTranslate, чтобы прочитать или изменить текущий язык. Каждый компонент <t> и t pipe обновляются автоматически.

import { Component, inject } from '@angular/core';
import { MagicTranslate } from '@magic-translate/angular';


@Component({
  selector: 'app-language-switcher',
  template: `
    <div>Current language is: {{ magicTranslate.language() }}</div>
    <button (click)="magicTranslate.setLanguage('de')">German</button>
  `
})
export class LanguageSwitcher {
  protected readonly magicTranslate = inject(MagicTranslate);
}

language — это сигнал, поэтому его также можно использовать в computed и effect.

Рендеринг на стороне сервера

Компонент <t> и t pipe переводятся в браузере. При рендеринге на стороне сервера сервер отображает исходное содержимое, а после гидратации оно переводится. Чтобы вместо этого отправить полностью переведенный HTML-код, переведите страницу во время рендеринга, как показано в разделе Предварительная визуализация.

Пример проекта

Вы можете найти пример проекта на GitHub и посмотреть его вживую.

ПредыдущееФункция переводаСледующийКомпонент <t>