문서화

Magic Translate vs. Angular i18n

Angular 앱은 보통 세 가지 도구 중 하나로 번역돼. Angular 내장 i18n, ngx-translate, Transloco.앱을 출시하기 전에 세 가지 모두 언어별로 번역이 필요해.Magic Translate 번역 파일 없이 템플릿에 있는 텍스트를 직접 번역해.

한 눈에

Magic TranslateAngular i18nngx-translate 그리고 Transloco
텍스트 쓰는 방법너의 말로는, <t> 아니면 t pipei18n 표시가 붙은 너의 말각 메시지의 키
번역들AI 번역, 자동으로 생성돼XLIFF 파일로 추출해서 네가 번역했어언어별 JSON 파일, 직접 작성
언어 바꾸기런타임 시언어당 빌드 하나.런타임 시
서버 렌더링응, 빌드 시에 사전 렌더링해서 번역했어.응응, 추가 설정 필요
가격무료 요금제, 그 다음에 사용량에 따른 월간 요금제무료야, Angular 일부야오픈 소스이고 무료야.

코드가 어떻게 다른지

Angular 내장 i18n으로 텍스트에 표시하고 추출하고 추출한 파일을 모든 언어로 번역해.

<h2 i18n>Your shopping cart</h2>
ng extract-i18n
# then translate messages.xlf into messages.de.xlf, messages.fr.xlf, …
# and build the app once per language

ngx-translate 또는 Transloco, 각 메시지에 키가 있고 번역이 JSON 파일 안에 있어.

<!-- ngx-translate -->
<h2>{{ 'cart.title' | translate }}</h2>
<!-- Transloco -->
<h2>{{ 'cart.title' | transloco }}</h2>

Magic Translate 하면 텍스트를 작성하고 앱을 출시해.

<h2><t>Your shopping cart</t></h2>
<input [placeholder]="'Search products' | t" />

언제 고를까 Magic Translate

  • 파일 추출, 번역, 로드 없이 다양한 언어로 Angular 앱을 만들고 싶어.
  • 앱을 다시 로드하거나 언어당 한 번씩 빌드하지 않고도 사용자들이 언어를 바꾸길 원해.
  • 텍스트가 자주 바뀌고 모든 언어가 최신 상태로 유지되길 바랄 거야.

Angular i18n, ngx-translate, Transloco 중 언제 골라야 해.

  • 모든 텍스트는 사람이 번역하거나 검토해야 해.
  • 각 언어의 복수형과 단어를 정확하게 제어해야 해.
  • 외부 서비스 없는 무료 솔루션을 원해.

Magic Translate 로 이사

한 번에 구성 요소 하나씩만 전환할 수 있어.키나 i18n 속성을 <t> 영어 텍스트로 바꾸거나 속성에 t pipe 써.Angular 가이드가 설정을 보여줘.

해볼 준비가 됐어?시작 안내서에 따라 5분 만에 첫 번째 구성 요소를 번역해.