`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' }" />

また、このテキストの使用法を単独で編集するには id も必要だ。

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

変数

v に翻訳してはいけない値を渡して、<t> コンポーネントと同じように $name として参照する。

<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の文字列を翻訳するには、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 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 pipe

t pipe

変数

コードに翻訳する

`t` pipe

`t` pipe