번역할 텍스트 표시하기

국제화(i18n)는 코드를 변경하지 않고도 앱의 텍스트를 다른 언어로 번역할 수 있도록 준비하는 작업입니다. Angular에는 템플릿에서 번역할 텍스트를 i18n 특성으로 표시하는 방식의 내장 i18n 시스템이 있습니다.

번역해야 하는 텍스트가 있는 모든 요소에 i18n 특성을 추가합니다. Angular는 빌드 시 이러한 텍스트를 수집하고 로캘에 따라 콘텐츠를 바꿉니다.

title이나 placeholder 같은 HTML 특성을 번역하려면 특성 이름 앞에 i18n-을 붙입니다.

i18n="meaning|description" 구문으로 번역가에게 맥락을 제공할 수 있습니다. 의미는 같은 번역을 사용해야 하는 동일한 문구를 하나로 묶고, 설명은 사용 방법을 설명합니다.

텍스트를 수정해도 번역이 유지되도록 @@ 뒤에 안정적인 사용자 지정 ID를 추가합니다. 이를 생략하면 원문 텍스트를 변경할 때 새 ID가 생성되어 기존 번역이 사라집니다.

번역된 텍스트 안의 바인딩은 자리표시자가 됩니다. 번역가는 이름이 지정된 토큰을 보고 자신의 언어에 맞게 위치를 바꿀 수 있습니다.

템플릿이 아닌 TypeScript의 문자열에는 $localize 태그를 붙입니다. 그러면 템플릿의 i18n 특성과 마찬가지로 문자열이 추출 대상으로 표시됩니다.

텍스트를 하드코딩하고 연결하면('You have ' + n + ' items') 번역이 깨집니다. 언어마다 어순이 다르고 복수형 규칙도 다르기 때문입니다. 전체 문구를 i18n으로 표시하면 번역가가 문법을 온전히 조정할 수 있습니다.

번역할 텍스트에 자식 요소가 포함되어 있으면 Angular는 해당 요소를 자리표시자로 보존하므로 번역가가 실수로 마크업을 삭제할 수 없습니다.

텍스트는 일반적으로 완전한 문장이나 label처럼 합리적으로 가장 작은 단위에 표시합니다. 하나의 문장을 여러 i18n 블록으로 나누지 마십시오. 각 조각이 별도의 번역하기 어려운 문자열이 되기 때문입니다.

i18n 특성 자체는 실행 시간 비용을 발생시키지 않습니다. Angular는 각 로캘의 컴파일 과정에서 표시된 텍스트를 바꾸고 별도의 최적화 번들을 생성합니다. 다음 레슨에서는 이러한 문자열을 추출하고 번역하는 방법을 알아봅니다.

placeholder 특성을 어떻게 번역합니까?

템플릿 텍스트에는 i18n 특성을 사용하고, 특성에는 i18n-attr을 사용합니다. 맥락을 위해 meaning|description을 추가하고 안정적인 ID를 위해 @@customId를 추가합니다. 바인딩은 자리표시자가 되며 TypeScript 문자열에는 $localize를 사용합니다. 이 표시 작업에는 실행 시간 비용이 전혀 들지 않습니다.