`t` pipe

Không phải mọi thứ đều có thể được bọc trong một thành phần. Các thuộc tính như placeholder hoặc title lấy một chuỗi và đôi khi bạn cần một bản dịch trong mã TypeScript của mình. Đối với những điều này, hãy sử dụng phương thức t pipe hoặc translate của dịch vụ 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 trả về văn bản gốc cho đến khi bản dịch được tải. Giống như thành phần <t>, nó lấy ngôn ngữ và hình thức làm tùy chọn:

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

Nó cũng cần một id, để tự chỉnh sửa cách sử dụng văn bản này:

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

Biến

Chuyển các giá trị không nên được dịch trong v và tham chiếu chúng là $name, giống như với thành phần <t>:

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

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

Văn bản được dịch một lần là Search {0} products và bản dịch được lưu trong bộ nhớ đệm được sử dụng lại khi count thay đổi.

Dịch bằng mã

Để dịch một chuỗi trong TypeScript, hãy gọi translate trên dịch vụ MagicTranslate. Nó trả lại một lời hứa.

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

Nếu không có tùy chọn lang, văn bản được dịch sang ngôn ngữ hiện tại.

translate cũng lấy các biến:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});

t pipe

t pipe

Biến

Dịch bằng mã

`t` pipe

`t` pipe