Angular의 국제화 (i)

오늘날의 광범위한 디지털 세계에서 웹 개발자는 전 세계 사용자와 연결하는 것을 목표로 합니다. 이를 달성하기 위한 핵심 전략은 Angular 애플리케이션을 다국어 경험으로 전환하는 것입니다. 앱이 사용자가 어디에 있든 모국어로 소통할 수 있는 국제화(i18n)에 오신 것을 환영합니다. 이 블로그에서는 i18n을 Angular 프로젝트에 통합하여 전 세계 사람들이 앱에 액세스하고 사용자 친화적인지 확인하는 방법을 살펴보겠습니다.

Angular의 국제화(i18n) 소개

귀하의 웹 앱이 전 세계 사용자를 연결하는 다리라고 상상해 보세요. 모두를 환영하고 사용자 친화적인 환경을 조성하려면 그들의 언어로 의사소통하는 것이 필수적입니다. 국제화(i18n)는 앱을 다양한 언어와 지역에 적용할 수 있도록 만드는 핵심입니다. Angular는 이를 달성하는 데 도움이 되는 강력한 도구와 기능을 제공합니다.

새로운 Angular 프로젝트 설정

i18n 여정을 시작하기 전에 새로운 Angular 프로젝트를 만들어 보겠습니다.

으아아아

다음 명령을 사용하여 Angular CLI를 사용하여 새 Angular 프로젝트를 시작할 수 있습니다. 설정 프로세스 중에 Angular 라우팅 활성화 및 스타일시트 형식(예: CSS, SCSS) 선택과 같은 옵션을 포함하여 프로젝트를 구성할 수 있습니다. 프로젝트 요구 사항에 맞는 설정을 선택하세요.

Angular의 i18n 도구 설치 및 구성

1. i18n 여정을 시작하려면 올바른 도구가 필요합니다. 앱을 다국어로 만들기 위해 Angular의 i18n 도구를 설치하고 설정하겠습니다.

으아아아 으아아아

1. ngx-translate가 설치되면 이를 Angular 모듈이나 Config로 가져와 번역 서비스를 설정할 수 있습니다.

으아아아

app.config파일을 사용하는 경우 NgModule을 다음 코드로 바꾸세요.

으아아아

이 코드에서는 필요한 ngx-translate 모듈을 가져오고 HttpLoaderFactory 함수를 사용하여 번역 로더를 구성합니다. HttpLoaderFactory 함수는 HttpClient 모듈을 사용하여 서버에서 번역 파일을 비동기적으로 로드합니다.

번역 파일 만들기

번역 서비스가 설정되면 지원하려는 각 언어에 대한 번역 파일을 만들 수 있습니다. 번역 파일은 키를 번역된 문자열에 매핑하는 JSON 파일입니다.

필요한 언어 코드를 이름으로 사용하여 파일을 만들고 번역을 추가하세요.

예를 들어, 다음은 영어 번역 파일입니다:

으아아아

여기 독일어 번역 파일이 있습니다:

으아아아

폴더 구조와 파일 이름은 다음과 같습니다.

참고:번역 파일은 동일한 키를 사용하지만 언어마다 값이 다릅니다. 이는 코드를 수정하지 않고도 애플리케이션에서 언어 간 전환을 단순화합니다.

템플릿에서 번역 사용

번역 파일이 준비되었으면 이제 이를 Angular 템플릿에 통합할 수 있습니다. 첫 번째 단계는 번역 서비스를 구성 요소에 삽입하는 것입니다.

App.comComponent.ts :

으아아아

이 코드에서는 TranslateService를 구성 요소에 삽입하고 영어를 기본 언어로 설정합니다. 또한 애플리케이션의 언어를 변경할 수 있는 TranslateLanguage 메서드도 정의합니다.

언어 번역용 구성 요소 만들기

으아아아

구성 요소를 만든 후 번역 서비스를 활용하여 여러 언어를 번역할 수 있습니다.

LanguageTranslation.comComponent.ts

으아아아

LanguageTranslation.comComponent.html

으아아아

이 코드에서는 TranslateService를 주입하고 영어와 독일어 간을 전환하는 두 개의 버튼을 제공하는 LanguageTranslationComponent를 만듭니다. 버튼을 클릭하면 적절한 언어 코드를 사용하여 TranslateService의 TranslateLanguage 메서드를 호출합니다.

참고:this.translate.use('DE')를 사용할 때 대소문자를 구분하므로 올바른 언어 코드를 사용하고 파일 이름이 정확한지 확인하세요.

결론:

국제화는 현대 소프트웨어 개발의 핵심 요소이며 Angular는 다국어 애플리케이션을 만들기 위한 강력한 도구를 제공합니다. ngx-translate 라이브러리를 사용하면 Angular에서 i18n을 구현하는 것이 더 간단해지고 적응성이 높아집니다.

이 기사에서는 ngx-translate를 사용하여 번역 파일을 생성하고, 템플릿에 번역을 적용하고, Angular 애플리케이션 내에서 언어를 전환하는 방법을 다뤘습니다. 이러한 지침을 따르면 전 세계 사용자가 액세스할 수 있는 다국어 앱을 손쉽게 구축할 수 있습니다.

Thank you!

Feel free to leave comments if you have any questions

위 내용은 Angular의 국제화 (i)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!