Thành phần <t>

Bọc nội dung của bạn trong thành phần <t> để dịch nó. Nội dung gốc được hiển thị cho đến khi bản dịch tải.

<t>This content will be translated</t>

Văn bản có ràng buộc cũng hoạt động. Nội dung được dịch lại bất cứ khi nào nó thay đổi, ví dụ khi name thay đổi:

<t>Hello {{ name() }}</t>

Đối với các giá trị thay đổi thường xuyên, chẳng hạn như tên và số đếm, hãy sử dụng các biến thay thế, vì vậy văn bản chỉ được dịch một lần.

Tất cả các bản dịch được yêu cầu cùng một lúc được gửi đến API trong một yêu cầu duy nhất và các bản dịch được lưu trong bộ nhớ cache. Bạn có thể sử dụng bao nhiêu thành phần <t> tùy thích.

<mt-translate> hoạt động như một bộ chọn thay thế và Translate là cùng thành phần với T.

Đầu vào

<t lang="fr" formality="formal">How are you?</t>

Biến

Chuyển các giá trị thay đổi, chẳng hạn như tên hoặc số đếm, trong [v] và tham chiếu chúng là $name trong nội dung:

<t [v]="{ name: user.name, count: unread() }">
  Hi $name, you have $count new messages
</t>

Magic Translate dịch văn bản xung quanh các giá trị một lần, dưới dạng Hi {0}, you have {1} new messages và đưa các giá trị trở lại ứng dụng của bạn. Bản dịch được lưu trong bộ nhớ cache và hoạt động cho mọi tên và mọi đếm, và bản thân các giá trị không bao giờ được gửi đến Magic Translate. Khi chỉ có các giá trị thay đổi, không có yêu cầu mới nào được thực hiện.

Các giá trị được đánh số theo thứ tự chúng xuất hiện lần đầu tiên. Bản dịch có thể di chuyển chúng bất cứ nơi nào ngôn ngữ cần chúng, ví dụ {1} neue Nachrichten für {0}.

Văn bản xung quanh các giá trị có thể chứa HTML và các giá trị có thể được định dạng bằng pipes trước tiên:

<t [v]="{ count: cart.items.length, total: cart.total | currency }">
  You have <b>$count items</b> in your cart, totalling <b>$total</b>.
</t>

Một vài quy tắc:

• Chỉ có các phím [v] được thay thế, vì vậy văn bản như $5 vẫn giữ nguyên. Nếu hai phím bắt đầu theo cùng một cách, chẳng hạn như count và counts, phím dài nhất sẽ thắng.
• Tên tương tự có thể xuất hiện nhiều hơn một lần.
• Các giá trị được chèn dưới dạng văn bản, không bao giờ là HTML. Thay vào đó, hãy đánh dấu trong văn bản xung quanh chúng: Hi <b>$name</b>.
• Các biến chỉ được thay thế trong văn bản, không phải trong các thuộc tính như href hoặc title.
• Trong chế độ phát triển, một khóa không xuất hiện trong văn bản ghi lại cảnh báo, phát hiện lỗi chính tả.
• Với kết xuất phía máy chủ, <t> với [v] hiển thị trống trên máy chủ và xuất hiện khi ứng dụng chạy trong trình duyệt.

Các biến sử dụng $name thay vì {name} vì Angular đọc một { duy nhất trong mẫu làm đầu thư ICU và mẫu không biên dịch.

Hạn chế

1. Bạn không thể đặt các thành phần Angular bên trong thành phần <t>. Các phần tử HTML thuần túy đều ổn (xem ví dụ bên dưới). Đánh dấu được dịch đi qua trình khử trùng HTML của Angular.
2. Nội dung bên trong thành phần <t> không được vượt quá 10 KB, tức là khoảng 5.000 ký tự.

<!-- this is OK, since <a> is a plain HTML element -->
<t>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</t>

<!-- this does NOT work, since <app-button> is an Angular component -->
<t>
  <app-button>Click me</app-button>
</t>

Để dịch các thuộc tính và các chuỗi khác, hãy sử dụng t pipe.