t pipe
すべてをコンポーネントにまとめることはできない。placeholder や title などの属性は文字列を取る。TypeScriptコードの翻訳が必要なこともある。これらには、MagicTranslate サービスの t pipe または translate メソッドを使う。
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' }" />
コードに翻訳する
TypeScriptの文字列を翻訳するには、MagicTranslate サービスで translate を呼び出して。それは約束を返すよ。
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'});
lang オプションがないと、テキストは現在の言語に翻訳される。