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

t pipe

Не все можно обернуть в компонент. Такие атрибуты, как placeholder или title, принимают строку, и иногда вам нужен перевод в код TypeScript. Для этого используйте метод t pipe или translate сервиса MagicTranslate.

t pipe

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


@Component({
  selector: 'app-search',
  imports: [TranslatePipe],
  template: `<input [placeholder]="'Search products' | t" />`
})
export class Search {}

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

<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />

Кроме того, для самостоятельного редактирования этого использования текста требуется id:

<button [title]="'Save' | t: { id: 'checkout-save' }"></button>

Переменные

Передайте значения, которые не следует переводить в v, и указывайте на них как $name, как и в компоненте <t>:

<input [placeholder]="'Search $count products' | t: { v: { count: products.length } }" />


<img [alt]="'Photo of $name' | t: { v: { name: user.name } }" [src]="user.photo" />

Текст переводится один раз как Search {0} products, а кэшированный перевод повторно используется при изменении count.

Перевод в коде

Чтобы перевести строку в TypeScript, вызовите translate в сервисе MagicTranslate. Он возвращает обещание.

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


const magicTranslate = inject(MagicTranslate);
const message = await magicTranslate.translate('Your order has been placed');


// with options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

Без опции lang текст переводится на текущий язык.

translate также принимает переменные:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});
ПредыдущееКомпонент <t>СледующийПредварительная визуализация