Dokumentation

Das t pipe

Nicht alles kann in eine Komponente verpackt werden. Attribute wie placeholder oder title benötigen eine Zeichenfolge, und manchmal benötigst du eine Übersetzung in deinem TypeScript-Code. Verwende für diese die Methode t pipe oder translate des MagicTranslate-Dienstes.

Das 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 gibt den Originaltext zurück, bis die Übersetzung geladen ist. Wie die Komponente <t>, sie nimmt die Sprache und die Formalität als Optionen an:

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

Es braucht auch ein id, um diese Verwendung des Textes eigenständig zu bearbeiten:

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

Variablen

Übergib Werte, die nicht in v übersetzt werden sollten, und referenziere sie als $name, genau wie bei der <t>-Komponente:

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


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

Der Text wird einmal als Search {0} products übersetzt und die zwischengespeicherte Übersetzung wird wiederverwendet, wenn sich count ändert.

Im Code übersetzen

Um eine Zeichenfolge in TypeScript zu übersetzen, rufe translate im Dienst MagicTranslate an. Es gibt ein Versprechen zurück.

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'
});

Ohne die Option lang wird der Text in die aktuelle Sprache übersetzt.

translate akzeptiert auch Variablen:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});
BisherigeDie <t>-KomponenteAls NächstesVorrendern