`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 中传递不应转换的值，并将其引用为 $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 中翻译字符串，请在 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