Angular에 다국어 지원 추가

Sep 12, 2025

어떻게

이 튜토리얼에서는 전 세계의 사람들에게 앱에 액세스 할 수 있고 사용자에게 친숙한 프로세스를 통해 여러분을 가져갈 것입니다. 세계의 약 20 % 만 영어를 사용하므로 다른 언어 옵션을 제공하면 사용자 경험을 향상시키고 앱의 손이 크게 늘릴 수 있습니다. Angular의 내장 된 국제화 도구를 살펴보고 정확하게 사용하는 방법을 보여 드리겠습니다.

앱이 아닌 사이트를 구축하는 경우 도구 세트가 맞는지 확인하십시오. 우리 가이드를 가장 잘 보아라 웹 사이트 빌더 그리고 톱 웹 호스팅 더 많은 것을 알아보십시오.

프로세스를 보여주는 매우 간단한 데모 앱을 만들었습니다. 여기에서 복제하십시오 설치 지침을 따르십시오.

앱을 시작하여 자신과 익숙해 지도록하십시오. 임의의 숫자와 다른 컨텍스트가있는 값을 표시하고 업데이트합니다. 통화, 날짜 등 우리는 자습서에서 사용되는 파이프 및 기능을 다룰 것입니다.

17 정말 유용한 반응 디자인 자습서

01. 언어 지원을위한 주요 용어

Add multi-language support to Angular: introduction — 귀하의 사이트가 영어로되어있는 경우 큰 관객에게 빠져 있습니다.

앱 - 국제화 및 현지화를 번역하는 것에 대해 이야기 할 때 종종 서로 교환하여 사용되는 두 가지 단어가 있습니다. 그러나 그들은 실제로 약간 다른 것을 의미합니다. 국제화는 다른 언어를 지원하기 위해 앱을 준비하는 과정을 말합니다. 대조적으로 현지화는 실제로 앱을 필요한 언어로 실제로 번역하는 프로세스를 나타냅니다. 본질적으로 국제화는 앱 당 한 번 한 번 일하고 현지화는 로컬 당 한 번 일어납니다. 적어도 계획입니다.

이 용어는 또한 단축 된 버전에서 익숙 할 수도 있습니다. i18n (여기서 18은 첫 번째 'i'와 국제화의 마지막 'n'사이의 문자 수)과 L10N (여기서 10은 'i'사이의 문자 수입니다) 그리고 현지화의 'n').

02. 현지화는 무엇입니까?

오늘날 전 세계적으로 6,000 개가 넘는 언어가 있으며, 대부분은 매우 작은 그룹의 사람들이 사용합니다. 그러나 Mandarin, Spanish and English - Mandarin, Spanish 및 English의 상위 3 개 언어에만 초점을 맞추어도 날짜 형식, 문법 구조, 다원화 및 숫자 서식에서 중요한 차이가 있습니다.

우리가 다섯 번째 가장 널리 사용되는 언어를 포함하는 경우 - 아랍어 - 우리는 또 다른 차이점이 있습니다. 아랍어는 UI가 미러링되어야 함을 의미하는 UI를 의미하는 오른쪽 (RTL) 스크립트입니다.

따라서 현지화 중에 우리는 문법, 레이아웃 및 서식 차이를 고려해야하며 물론 텍스트 자체를 변경해야합니다. 각도는이 많은 것을 도울 수 있지만 여전히 텍스트를 수동으로 번역하고 번역을 저장해야합니다. 클라우드 스토리지 , 그래서 그것은 당신의 팀과 안전하고 공유 가능합니다).

03. 국회의 로케일

우리는 우리가 지원 해야하는 각 로켈에 대해 현지화해야합니다. 로켈은 전반적으로 세계의 한 지역에서 공유되는 경향이있는 전역에서 언급 된 고려 사항에 대한 일반적인 선호도를 의미합니다. 각 로켈은 언어 코드와 로캘 확장자를 지정하는 유니 코드 로캘 식별자로 표시됩니다.

Angular의 기본 로케일은 'US'(미국)의 언어 코드 'en'(영어) 인 'en-us'입니다. 'en-US'에 대한 현지화 된 앱은 영국에서 사용되는 영어 인 'en-GB'에 대한 현지화 된 앱과 미소적으로 다릅니다. 예를 들어, 미국 날짜에는 포맷 된 mm / dd / yyyy의 형식이있는 반면, 영국에서는 더 합리적인 DD / mm / yyyy 접근 방식을 사용합니다. 이 사소한 차이는 중요한 오류가 발생할 수 있습니다.

재미있는 것을 만들기 위해서는 이라크, 일명 'AR-IQ'와 영국, 일명 'en-GB'에서 말한 것처럼 아랍어를 위해 데모 앱을 현지화합시다. 이번에는 영어를 기본값으로 사용할 것입니다.

04. 구성 빌드

우리의 데모 프로젝트는 유용한 공구가 포함 된 Angular CLI를 사용하여 생성되었습니다. 우리는이 프로젝트에 대한 미리 (AOT) 컴파일러를 사용하여 CLI의 구성 파일을 변경해야합니다. 'Angular.json'을 변경해야합니다. JIT (Just-In-Time)를 사용하려면 사물을 약간 다르게 구성해야합니다.

AOT 빌드를 사용하면 템플릿 및 스타일 시트와 같은 작업을 가져 오기 위해 비동기 요청이 필요하지 않고로드되는 작고 빠른 렌더링을 제공합니다. 결과적으로 각 로케일에 대한 빌드를 만들고 URL 또는 일부 종류의 서버 측 언어 탐지 논리를 사용하여 적절한 빌드를 제공해야합니다. 가장 간단한 접근 방식은 각 로케일에 대한 디렉토리를 만드는 것입니다. www.example.com/en-gb 및 www.example.com/ar-iq. 거래는 당신이 언어를 on-the-the-the-the-the-fly를 전환 할 수는 없지만 실제 사용자가 필요로하는 무언가가 될 것 같지 않다는 것입니다.

우선 우리는 아랍어 로켈에 대한 빌드 구성을 추가해야합니다. JSON 파일에서 'Architect.build.Configations'객체를 찾습니다. 다음 블록을 추가하여 로캘의 구성을 정의하십시오.

 "AR-IQ": {
    "bashhref": "/ ar-iq /",
    "deployurl": "/ AR-IQ /",
    "outputpath": "dist / angular-i18n-demo /
AR-IQ ",
    "i18nfile": "src / locale / messages.ar-iq.
xlf ",
    "i18nformat": "xlf",
    "i18nlocale": "AR-IQ"

이 구성은 각도가 컴파일 된 빌드와 사용할 변환 파일과 형식을 출력 할 위치를 알려줍니다. 또한 로케일을 설정하고 앱이 배포 될 디렉토리를 지시합니다.

'en-GB'로켈을 사용하려면 'Architect.build.Options'의 기본 옵션을 수정해야합니다. 그림과 같이 다음 등록 정보를 설정하십시오. 참고 우리는 이사회 전역에서 이곳에서 AOT를 활성화하므로 프로덕션 및 개발 빌드에 사용됩니다.

 "outputpath": "dist / angular-i18n-demo /
EN-GB ",
  "i18nlocale": "en-gb",
  "deployurl": "/ en-gb /",
  "basehref": "/ en-gb /",
  "AOT": TRUE

각도는 여러 가지 로케일을 지원합니다. 'i18nlocale'속성에 대해 올바른 값을 사용해야합니다. 전체 목록을 볼 수 있습니다 여기 ...에

장면 뒤에서 위의 구성은 이러한 로켈 환경 설정 파일 중 하나에서로드 및 읽기 만하면됩니다.

05. 구성을 제공하십시오

빌드 출력을 구성하는 것 외에도 'NG Serve'명령을 개발하기위한 구성을 설정해야합니다. 우리가 방금 추가 한 빌드 구성을 참조하기 만하면 더 간단합니다. 'Angular.json'에서 다음 블록을 'Architect.Serph.Configations'에 추가하십시오.

 "AR-IQ": {
    "browsertarget": "Angular-i18n-
데모 : 빌드 : AR-IQ ",
    "SEPPPATH": "/ AR-IQ /"
  }

여기서 우리는 'browsertarget'속성을 사용하여 구성 빌드 구성 옵션을 참조하고 있으며 'SEPTPATH'를 설정합니다. 아랍어 앱을 제공하거나 빌드하기 전에 위의 'i18nfile'속성에서 참조되는 번역 파일을 만들어야합니다. Angular CLI에는 플래그가 지정된 텍스트를 업계 표준 번역 소스 파일로 추출하는 도구가 포함되어 있습니다.

튜토리얼에서 나중에이 파일을 자세히 설명 할 것입니다. 그러나 지금은 우리는 컴파일 할 수 있도록 기본, 빈 파일을 내보낼 필요가 있습니다.

다음 옵션을 사용하여 'NG XI18N'명령을 사용합니다. 이것은 '-out-file'파일 이름에 로케일 ID를 포함 할 유일한 시간입니다.

 $ NG XI18N - output-path locale -out-file
messages.ar-iq.xlf --i18n-locale ar-iq

이것은 src / locale 디렉토리에 파일을 만들어야합니다. 이제 켜기에서는 항상 'messages.xlf'라는 파일을 출력하고 이름의 로케일 ID로 버전을 수동으로 복사합니다. 그 이유는 파일에 추가 된 기존 번역을 덮어 쓰지 않도록 추출 도구가 덮어 쓰지 않도록하는 것입니다.

06. 스위치 구성

Add multi-language support to Angular: switching configuration — 구성을 전환함으로써 위치 별 통화로 기본 설정 가능

이 시점에서 우리는 이제 프로젝트를 컴파일하고 무슨 일이 일어나는지 확인할 수 있지만, 사용하는 구성을 'NG SEBB'명령에 알려야합니다. 먼저 영어 버전을 살펴 보겠습니다. 영어가 기본값이기 때문에 여기를 변경하지 않습니다.

 $ NG 서브

볼 수 있으므로 Angular의 기본 로케일을 'en-US'를 사용하는 원래 버전과 매우 유사합니다. 주목할만한 차이점은 이제 $ $ 대신 US $를 지정하는 것입니다. 좋아, 이제 아랍어 버전을 시도해 봅시다. 영어 버전을 중지하고 실행 :

 $ NG 서브 - 컨플리케이션 = AR-IQ

당신이 기대할 것으로 예상 대로이 버전에는 더 명백한 차이가 있습니다. 특히 날짜는 현재 아랍어로 작성되었습니다. 각도는 몇 개월 및 일과 같은 몇 가지 사항의 이름이 설정된 목록에서이기 때문에 궁극적으로 알려진 숫자와 관련이 있습니다. 그러나 다른 모든 것은 아직 영어로되어 있습니다.

07. 로켈 인식 파이프

'app.component.html'의 소스 코드를 자세히 살펴보고 여러 개의 다른 파이프를 사용한다는 것을 알 수 있습니다. 다음 각형 파이프는 현재 로케일을 기반으로 출력을 적응합니다 : 'DatePipe', 'currencypipe', 'decimalpipe'및 'percentpipe'.

이 파이프를 사용하는 경우 조심스럽게 각도는 당신을 위해 현지화 다리저스를 많이 처리합니다. 신중하게 우리는 가능한 경우 어디에서나 미리 정의 된 옵션을 사용하는 것을 의미합니다. 좋은 예는 우리가 앞서 언급 한 미국 대 영국 날짜 서식입니다. 영국에있는 경우 (현명한) 일간의 1 년 형식을 사용하여 날짜를 표시하려는 경우 미리 정의 된 ''shortdate ''옵션이 m / d / yy로 렌더링되는 것을 찾기 위해 좌절 할 수 있습니다 (예 : . 10/9/18) 및 이와 같이 원하는 형식을 하드 코딩하는 것을 유혹하십시오 :

 {{mydate | 날짜 : 'DD / mm / y'}}

그러나 우리는 이제 각도는 'en-us'로켈을 기본적으로 사용하기 때문에 m / d / yy 형식을 얻을 것을 알고 있습니다. 따라서 형식을 하드 코딩하는 대신 ''ShortDate ''옵션을 사용하고 'en-GB'를 사용하도록 앱을 현지화해야합니다.

 {{mydate | 날짜 : 'shortdate'}}

그것은 작은 조금 더 많은 노력을 기울이지 만 우리는 우리의 마음의 콘텐츠에 로케일을 추가 할 수 있으며 항상 사용자 친화적 인 날짜 형식을 가지고 있습니다.

08. 미리 정의 된 옵션을 무시합니다

불행히도 미리 정의 된 형식을 무시할 수있는 쉽고 내장 된 방법이있는 것 같습니다. 예를 들어 런타임시 형식을 수정할 수있는 방법이 없으므로 DD / MM / Y 대신 ''ShortDate ''형식이 DD / mm / yyyy를 선호할지 결정할 수는 없습니다. 또한 미리 정의 된 옵션을 추가 할 수 없습니다.

이러한 가장자리 케이스의 경우 각도 'DatePipe'를 래핑하고 로케일 당 사용자 지정 형식을 처리하는 사용자 지정 날짜 파이프를 만들 수 있습니다. 인식하지 못하는 것은 내장 된 'Datepipe'로 전달됩니다.

09. currencypipe.

선반에서 'currencypipe'는 숫자를 미국 달러로 포맷하고, 소수점의 두 자리를 다듬고 로케일의 선호도에 정의 된대로 그룹을 추가합니다.

우리의 로켈에서 통화가 항상 미국 달러에 있음을 알 수 있습니다. 'EN-GB'로켈을 사용할 때 Sterling (GBP)으로 마술처럼 전환되지 않습니다. 그 이유는 £ 10이 $ 10과 동일하지 않으므로 수신자가 참조하는 통화를 명시 적으로 지정해야합니다.

GBP를 사용하려면 'app.component.html'을 업데이트합시다. 통화 코드를 지정할 때 ISO 4217 표준 (온라인 목록)에서 올바른 값을 사용해야합니다.

다음과 같이 ':'GBP '를 추가하여 두 통화 파이프를 수정하십시오.

 {{value $ $ | 비동기 | 통화 : 'GBP'}}

그리고 우리는 US $ 대신 £ 기호를 볼 것을 시작할 것입니다.

통화를 변경하는 경우 ITD를 GBP의 동등한 가치로 자동 변환하는 것과 같지 않은 것은 아닙니다.

10. 번역 워크 플로우

좋아, 우리는 두 개의 로켈을 구성하고 각도는 우리를 위해 우리를 위해 우리를 위해 일하는 것을 유용하게하고 있지만 텍스트는 모두 영어로되어 있습니다. 각도는 자동으로 이것을 자동으로 번역 할 수 없지만 워크 플로의 일부로 도와 드릴 수 있습니다. 이것은 일어난 일입니다.

번역을 위해 모든 구성 요소의 정적 텍스트를 플래그하십시오
이 정적 텍스트가 포함 된 번역 파일을 내 보냅니다
번역 파일을 수정하고 관련 번역을 추가하십시오
병합 번역 된 번역 파일을 앱으로 다시

각도는 2 단계와 4 단계를 도와줍니다. 그러나 개발자는 수동으로 1 단계를 필요로합니다. 3 단계는 일반적으로 번역 전문가 또는 대리점을 사용하여 특별 소프트웨어를 사용하여 번역 파일을 읽고 업데이트 할 수 있습니다.

11. 축 세부 사항

이를 위해 고정 된 텍스트가 포함 된 모든 요소에 특수한 속성을 추가해야합니다. 콘텐츠가 API에서 도착하면 API가 아니므로 API에서 API에서 현지화해야합니다. 텍스트가 소스 코드의 HTML 템플리트에 직접 쓰여질 때만 특성을 추가하면됩니다. 여기서 키 포인트는 TypeScript 파일을 로케일 - agnostic로 유지하려고 시도해야한다는 것입니다. 다른 단어로 구성 요소 논리에서 변환되어야하는 텍스트를 넣고 템플릿에 모두 유지하십시오. 그렇지 않으면 추출 도구가 추출 할 수 없습니다. 어쨌든 당신의 우려를 삶과 코드에서 분리하는 것은 좋은 관행입니다.

'app.component.html'을 열고 '현재 값'제목으로 시작합시다. 'i18n'속성을 텍스트가 직접 포함하는 요소에 추가하기 만하면됩니다.

 & lt; div class = "meta__title"i18n & gt;
     현재 가치
   & lt; / div & gt;

이것이 단지 '바보'사용자 정의 특성 일 뿐이라는 것을 이해하는 것이 중요합니다. 실제로 런타임에 아무 것도 트리거하는 각도 지침이 아닙니다. 실제로 컴파일러는 번역 후 제거됩니다.

어쨌든, 추출 도구를 다시 실행하여 번역 파일을 다시 생성 할 때 발생하는 메시지가 표시됩니다. '--out-file'은 지금 'messages.xlf'일 것입니다.

 $ NG XI18N - output-path locale -out-file
messages.xlf --i18n-locale ar-iq

출력 XLF 파일을 열고 몇 가지 추가 컨텍스트 정보가있는 이와 같이 보이는 새 번역 단위 블록이 표시되어야합니다.

& lt; 트랜스 단위 ID = "Face3D45C0F0CD38B726E7798DA15 3E2F8D55551 "DataType ="HTML "& gt; & lt; 소스 & gt; 현재 가치 & lt; / source & gt;

훌륭하게 도구가 'i18n'속성을 집어 들었음을 의미합니다. 그 긴 ID는 도구에 의해 생성되며 텍스트가 변경되지 않는 한 동일하게 유지됩니다. 동일한 텍스트의 여러 인스턴스가있는 경우 모두 동일한 ID를 얻을 수 있습니다. 이 ID를 편집하지 마십시오!

원하는 경우 'i18n'속성 내에서 사용자 지정 ID를 지정할 수 있습니다. 이렇게하면 텍스트가 변경 되더라도 ID가 동일하게 유지되므로 앱 전체에 ID 충돌이 없어야합니다. '@'접두사를 사용하여 사용자 정의 ID를 설정하십시오. 여기서 ID는 '제목'이됩니다.

& lt; div class = "meta__title"i18n = "@@ tiret"& gt; 현재 가치 & lt; / div & gt;

12. 일부 맥락을 추가하십시오

번역가가 정확한 번역을 제공 할 수 있도록하는 것이 종종 텍스트가 사용되는 컨텍스트를 알아야합니다. 'i18n'속성은 번역자를 돕는 설명과 의미를 정의 할 수 있습니다. 형식은 다음과 같습니다.

 & lt; div i18n = "의미 | 설명 @@
Customid "& gt; 텍스트 & lt; / div & gt;

우리의 제목을 의미와 설명으로 업데이트 해 봅시다 :

 & lt; div class = "meta__title"i18n = "카드
제목 | @@ title "& gt;
     현재 가치
   & lt; / div & gt;

번역가에게 정확한 번역을 제공하기에 충분한 컨텍스트를 제공해야합니다. 번역 파일을 재생성 하고이 값이 출력되었습니다. 사용자 정의 ID를 사용하지 않는 경우 생성 된 ID는 의미와 텍스트를 고려합니다. 그래서 같은 텍스트는 다른 의미로 다른 ID를 얻을 것입니다. 그러나 설명은 ID에 영향을 미치지 않습니다.

13. 변수가있는 텍스트

소개 섹션으로 이동합시다. 첫 번째 단락에는 텍스트와 런타임에 보간 할 변수가 포함됩니다. 우리는 어떻게 이것을 처리합니까?

잘 행복하게 그것은 아주 간단합니다. 다시 포함 된 요소에 의미있는 'i18n'속성을 추가해야합니다. 단락 요소에 직접 추가하십시오.

& lt; p i18n = "시장에서 폐쇄 값 | 가치 폐쇄 된 어제 @@ closingValue "& gt; 추출 도구를 다시 실행하면이 새로운 번역 단위가 표시됩니다. & lt; 트랜스 단위 ID = "ClosingValue" DataType = "html"& gt; & lt; Source & gt; 어제 & amp; apos; s 닫는 가치는 & lt; x id = "보간"equiv-text = "{{ ClosingValue | 통화 : & amp; apos; gbp & amp; apos; }} "/ & gt; & lt; / source & gt;

출력에서 가변 보간이 어떻게 상세히 설명되었는지 확인하십시오. 이것에 대한 좋은 점은 번역가가 필요할 경우 문장의 문법적 구조를 바인딩을 깨뜨리지 않고 수정할 수 있습니다. 예를 들어, 문장이 가장 잘 작성 될 언어가있을 수 있습니다. x 가치는 어제의 폐쇄, 즉 처음에 변수와 함께였습니다.

14. 다원화

다음 단락으로 이동하면 협박 구문이 표시됩니다. 이를 ICU 메시지 형식이라고하며 변수의 값을 기반으로 다른 텍스트의 다른 덩어리를 지정할 수 있습니다.

이 값을 사용하여 값이 0 인 경우 영어로 단어를 추가 할 수 있습니다. 예를 들어 '초'가이 ICU 다원화 표현식을 사용할 수있는 시간 (초)을 포함하는 변수입니다.

 {{seconds}} {초, 복수형, 하나
{두 번째}, 다른 {초}}

출력 할 것인가 :

0 초
1 초
2 초

문서화 된 것으로 보이지 않는 것으로 보이지만 파업화 구문 내에서 'asyncpipe'를 사용하여 Observables와 함께 작동 할 수도 있습니다.

그 예에서 '하나'와 '다른'는 다원화 카테고리입니다. 선택할 수있는 카테고리가 많이 있지만 조심하십시오! 모든 로케일이 모든 카테고리를 지원하는 것은 아니며 현재 로케일에서 지원하지 않는 범주를 사용하려고하면 각도는 알려줍니다. '두'카테고리가 'en-GB'로케일에서 작동하지 않고 대신 '다른'텍스트를보고 있기 때문에 뭔가 잘못했는지 생각하는 것이 쉽습니다. 'Zero'와 'Two'가 명시 적 값이지만 'one'및 'Other'와 'One'및 'Other'만 지원하는 'en'rone 'One'과 'other'를 지원할 수 있습니다.

이 파일을 확인하십시오 실제로 지원되는 것을 확인하십시오.

15. 여러 방사형 막대 차트

카테고리 대신 숫자를 사용 하여이 제한을 해결할 수 있습니다. '='로 값을 접두사로 설정하십시오.

 거기에, {감시자, 복수, = 0 {아무도 없다} = 1
{하나의 사람} = 2 {두 사람이}
    다른 {{{watchers}}}}}}
지금보고.

이것은 이미 데모 앱에 설정되어 있습니다. 우리는 단지 포함 된 단락에 'i18n'속성을 추가해야합니다.

& lt; p i18n = "watchers | 사람들의 수 @@ 당원 "@ @ watchers"value "& gt;

이 외모를 확인하려면 추출 도구를 다시 실행하십시오. 이것이 이것이 약간 다르게 출력된다는 것을 알 수 있습니다. 그것은 두 번의 번역 단위를 만들 것입니다. 하나는 ICU 표현식 자체 및 그 표현식을 원래 문자열로 보간하는 하나입니다.

16. 표현식을 선택하십시오

변수의 값에 따라 다른 텍스트를 표시하려면 'Select'ICU 표현식을 사용하여 위에서 설명한 '복수형'구문과 매우 유사합니다. 우리의 데모 앱에서 우리는 가치에 적용된 변경을 모니터링하고 변경이 양수, 음수 또는 0인지 여부에 따라 'up', '다운'또는 '안정성'을 출력하는 'UP', '다운'또는 '안정성'이라는 '트렌드 $'라는 관찰 가능한 스트림을 만듭니다.

그런 다음 스트림 값에 따라 다른 문자열을 출력하기 위해 'Select'ICU Expression을 연결합니다. 여기에서 'asyncpipe'를 사용하는 것을 볼 수 있습니다 :

 가치 {Trend $ | 비동기, 선택, 업
{증가} 아래로 {감소} 안정
    {변경되지 않음}}

이것은 'ngif'또는 'ngswitch'를 사용하여 DOM을 조작하는 것보다 다소 클리너 구문이며, 또한 추출 도구로 멋지게 재생됩니다. 포함 된 요소에 'i18n'속성을 추가하십시오.

& lt; div class = "card__info"i18n = "값 트렌드 | 가치 변경 추세 @@ trend "

번역 파일을 재생성하면 두 번의 번역 단위가 생성 된 복수 출력과 유사한 접근 방식이 표시됩니다. ICU 표현식은 익숙해지면 꽤 편리하며 더 많은 복잡한 출력을 생성하기 위해 중첩 할 수 있습니다.

17. 번역 추가

Add multi-language support to Angular: markup — 번역이 필요한 모든 텍스트를 표시하면 번역 파일을 생성 할 수 있습니다.

추가 할 수있는 하나의 'i18n'속성 :

& lt; div class = "card__info"i18n = "트랜잭션 카운트 | 오늘 트랜잭션 수 거래 "& gt; 거래 : {{트랜잭션 $ | 비동기 | 번호}}} & lt; / div & gt;

이제 우리는 번역을 필요로하는 모든 텍스트를 마지막으로 하나의 번역 파일을 생성 할 수 있습니다. 일단 생성되면 'messages.ar-iq.xlf'로 이름을 바꾸고 이전 화신을 대체합니다. 이것은 우리가 번역 전문가에게 보내는 파일이지만,이 튜토리얼의 목적을 위해 Google 번역은 서 있습니다!

XLF 파일을 열고 모든 '& lt; 소스 & gt;'복제하십시오. 요소, '& lt; target & gt;'라는 이름을 바꿉니다. 불행히도 그것은 내용을 아름답게하는 데 도움이 될 수 있도록 매우 깔끔 할 수 있습니다.

우리 모두가 모두 알고 있는지 확인하고 파일을 저장하고 아랍어 로켈로 앱을 시작하십시오.

 $ NG 서브 - 컨플리케이션 = AR-IQ

이와 같이 터미널에있는 메시지가 표시되면 하나를 그리워하는 것을 의미합니다.

 XLIFF 파스 오류의 오류 : 메시지 * ID *
번역을 놓치고 ( "

바라건대 오류가 없으면 브라우저에서 앱을 볼 수 있습니다. 우리는 아직 실제 아랍어를 추가하지 않으므로별로 다른 보이지 않을 것입니다.

18. Google 번역

Add multi-language support to Angular: Google Translate — Google 번역은 귀하의 사이트에 대한 번역을 쉽게 만들 수있는 쉬운 방법입니다.

쉽게 뭔가 시작하자 - '현재 가치'제목. Google 번역은 (아랍어 본문)이어야하므로 '& lt; 타겟 & gt'의 값을 업데이트해야합니다. 요소:

 소스 & gt; 전류 값 & lt; / source & gt;
       & lt; 목표물 & gt; 여기서 아랍어 텍스트 & lt; / target;

여태까지는 그런대로 잘됐다. 이제 보간으로 하나를 해보자. "어제의 폐쇄 가치는 ..."(잘하면!) :

 & lt; 여기서 아랍어 텍스트 & lt; x
id = "보간"equiv-text = "{{닫기
| 통화 : & amp; apos; gbp & amp; apos; }} "/& gt;.</target>

번역 할 때 숫자를 사용하므로 보간이있는 위치를 볼 수 있습니다. Google 번역에서 번역 된 결과가 번역 된 결과를 볼 때 시작의 숫자 - 그러나 번역 파일에 복사하여 붙여 넣을 때 원래 순서로 돌아갑니다. 이것은 아랍어가 RTL 언어이므로 스크립트가 완전히 미러링되기 때문에 이것은 일어나고 있습니다. Google 번역은 'DIR = "RTL"'속성을 포함하는 요소에 추가 하여이 작업을 수행합니다. 우리는 다음 단계 에서이 작업을 수행하는 방법을 배웁니다. 번역의 나머지 부분은 데모 repo, '자습서'지점에서 사용할 수 있습니다.

19. 스크립트 방향

우리는 각 앱에서 각 앱에서 스크립트 방향을 관리해야합니다. 현재 로케일이 LTR 또는 RTL 언어인지 여부를 탐지 할 수있는 방법은 또한이를 하드 코딩해야합니다. 각도는이 내장 지시문을 제공하면 훌륭합니다.

'app.component.ts'를 엽니 다. 'inject', 'locale_id'와 '@ angular / core'에서 'hostbinding'가져 오기 '를 가져옵니다. 그런 다음 다음과 같이 'hostbinding'을 설정하십시오. 그러면 AppComponent에 'dir'속성을 추가하고 기본 언어 방향을 'ltr'으로 설정합니다.

 @hostbinding ( 'attr.dir') dir = 'ltr';

다음으로 생성자를 추가하고 'locale_id'를 삽입하십시오. AOT를 사용하고 있기 때문에이 구성으로 설정됩니다.

 생성자 (@Inject (locale_id) 개인 로캘 : 문자열) {}

마지막으로 다음과 같은 스 니펫을 기존의 'ngoninit'메서드에 추가합니다. 여기서 우리는 'locale_id', 즉 'ar-iq'가 'ar'로 시작하고 대신 'rtl'로 방향을 변경하는지 확인하고 있습니다.

 if (this.locale.startswith ( 'ar')) {
     이건 = 'rtl';
}

더 많은 로케일을 뒷받침 할 계획이라면 아마도 오늘날 사용 중에 약 10 개의 RTL 언어 만 있으므로이 접근법이 너무 다루기 어려워해서는 안됩니다. 아랍어 앱을 시작하고 이제 UI가 미러링되었음을 알아야합니다. £ 기호는 오른쪽에 있어야합니다.

20. 생산

마지막 단계는 생산 빌드를 생성하고 확인하는 것입니다. 첫째, 'Angular.json'구성을 다른 빠른 수정해야합니다.

'Architect.build.Configations'에서는 기존 프로덕션 객체를 복제하고 'Production-AR-IQ'라는 이름을 바꿉니다. 그런 다음 기존의 "AR-IQ"구성의 등록 정보를 복사하여 객체에 붙여넣기 때문에 프로덕션 옵션과 'i18n'옵션이 모두 있습니다.

또한 'Architect.Serph.Configations'를 업데이트해야합니다. 이번에는 기존의 ' "AR-IQ"오브젝트를 복제하고 "PRIDUCTION-AR-IQ"라는 이름을 바꾸고'BrowserTarget '값을 변경하여 새로운'Production-AR-IQ '구성을 가리 키도록 변경하십시오.

이제이 명령을 사용하여 프로덕션 아랍어 로케일을 작성하고 제공 할 수 있습니다.

 $ NG 서브 - 컨플리케이션 = 생산 -AQ

좋아, 우리가 끝났어! 우리는 성공적으로 우리의 앱을 경험했으며 'en-GB'및 'AR-IQ'잠재 고객을 위해 현지화했습니다. 각도는 개발자에게 과정을 현저하게 간단하게 만듭니다. 실제로 가장 어려운 비트는 번역이 무엇인지 알아내는 것이 아랍어 스피커에 사과합니다.

이 기사는 원래 Creative Web Design Magazine Web Designer의 문제 281에서 출판되었습니다. 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

Angular에서 전체 페이지 웹 사이트를 만드는 방법
2019 년에 프로그래밍을위한 최고의 노트북
응용 프로그램을 만드는 방법

Angular에 다국어 지원 추가

01. 언어 지원을위한 주요 용어

02. 현지화는 무엇입니까?

03. 국회의 로케일

04. 구성 빌드

05. 구성을 제공하십시오

06. 스위치 구성

07. 로켈 인식 파이프

08. 미리 정의 된 옵션을 무시합니다

09. currencypipe.

10. 번역 워크 플로우

11. 축 세부 사항

12. 일부 맥락을 추가하십시오

13. 변수가있는 텍스트

14. 다원화

15. 여러 방사형 막대 차트

16. 표현식을 선택하십시오

17. 번역 추가

18. Google 번역

19. 스크립트 방향

20. 생산

어떻게 - 가장 인기있는 기사

비즈니스의 웹 사이트 이름을 선택하는 방법

Mac에서 스크린 샷을 찍는 방법

NextJS / React의 SEO 친화적 인 헤드 구성 요소 만들기

자연 언어 처리를 이해

Elven Maiden을 칠하는 방법

이 다섯 가지 요인과 반응을 주위에 반응 시키십시오

설득력을 칠하는 방법

그림에서 소리를 전달하는 방법

카테고리