t pipe
Nie wszystko można owinąć w komponent. Atrybuty takie jak placeholder lub title przyjmują ciąg znaków, a czasami potrzebujesz tłumaczenia w kodzie TypeScript. W tym celu skorzystaj z metody t pipe lub translate usługi 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 zwraca oryginalny tekst do momentu załadowania tłumaczenia. Podobnie jak komponent <t>, przyjmuje język i formalność jako opcje:
<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />
Potrzebny jest również id, aby samodzielnie edytować to użycie tekstu:
<button [title]="'Save' | t: { id: 'checkout-save' }"></button>
Zmienne
Przekaż wartości, które nie powinny być tłumaczone w v i odwołuj je jako $name, tak samo jak w przypadku składnika <t>:
<input [placeholder]="'Search $count products' | t: { v: { count: products.length } }" /><img [alt]="'Photo of $name' | t: { v: { name: user.name } }" [src]="user.photo" />
Tekst jest tłumaczony raz jako Search {0} products, a tłumaczenie zapisane w pamięci podręcznej jest ponownie używane, gdy zmieni się count.
Tłumaczenie w kodzie
Aby przetłumaczyć ciąg znaków w TypeScript, zadzwoń translate w usłudze MagicTranslate. Zwraca obietnicę.
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 optionsconst formal = await magicTranslate.translate('How are you?', {lang: 'fr',formality: 'formal'});
Bez opcji lang tekst jest tłumaczony na bieżący język.
translate przyjmuje również zmienne:
const message = await magicTranslate.translate('Your order $id has shipped', {v: { id: order.id }});