<t> 컴포넌트

콘텐츠를 <t> 구성 요소로 묶어 번역해.원본 콘텐츠는 번역이 로드되기 전까지는 보여져.

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

바인딩이 있는 텍스트도 작동해.내용은 바뀔 때마다, 예를 들어 name 변경 시 다시 번역돼.

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

이름이나 개수처럼 자주 바뀌는 값의 경우 대신 변수를 사용해서 텍스트가 한 번만 번역돼.

동시에 요청된 모든 번역은 한 번의 요청으로 API로 전송되고 번역은 캐시돼.<t> 구성 요소는 원하는 만큼 사용할 수 있어.

<mt-translate> 대체 선택기로 작동하고 Translate T 하고 같은 구성 요소야.

입력

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

변수들

이름이나 개수 등 변경되는 값을 [v] 안에 전달하고 내용에서 $name 참조해.

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

Magic Translate 는 값 주위의 텍스트를 Hi {0}, you have {1} new messages 으로 한 번 번역하고 값을 앱에 다시 넣어.번역은 캐시되어 모든 이름, 모든 개수에 적용되고 값 자체는 Magic Translate 로 전송되지 않아.값만 바뀌면 새 요청은 없어.

값은 처음 나타나는 순서대로 번호가 매겨져 있어.번역은 언어에 필요한 곳 어디든 옮길 수 있어. 예를 들어 {1} neue Nachrichten für {0}.

값 주위의 텍스트는 HTML을 포함할 수 있고 값은 먼저 pipes 형식으로 지정할 수 있어.

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

몇 가지 규칙:

• [v] 키만 교체되므로 $5 같은 텍스트는 그대로 유지돼.두 개의 키가 같은 방식으로 시작하면 (예: count, counts) 가장 긴 쪽이 이겨.
• 같은 이름이 두 번 이상 나타날 수 있어.
• 값은 HTML이 아니라 텍스트로 삽입돼.그 대신 주위의 텍스트에 마크업을 넣어 줘. Hi <b>$name</b>.
• 변수는 텍스트로만 바뀌고 href, title 같은 속성에서는 바뀌지 않아.
• 개발 모드에서는 텍스트에 나타나지 않는 키가 경고를 기록하는데 오타가 걸려.
• 서버 측 렌더링을 사용하면 [v] 적용된 <t> 가 서버에서 비어 렌더링되고 브라우저에서 앱이 실행되면 나타나.

변수는 {name} 대신 $name 를 사용해. Angular 는 템플릿의 단일 { 를 ICU 메시지의 시작으로 읽고 템플릿은 컴파일되지 않기 때문이야.

한계

1. <t> 구성 요소 안에 Angular 구성 요소를 넣을 수 없어.일반 HTML 요소는 괜찮아 (아래 예 참조).번역된 마크업은 Angular HTML 새니타이저를 거쳐요.
2. <t> 구성 요소 내의 콘텐츠는 10KB, 즉 약 5,000자를 초과할 수 없어.

<!-- 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>

속성과 다른 문자열을 번역하려면 t pipe 써.