sharingStorage

Angular 다국어전용 | @ngx-translate 사용법 본문

Front-End/Angular

Angular 다국어전용 | @ngx-translate 사용법

Anstrengung 2022. 5. 16. 15:36

 ngx-translate  라이브러리를 이요하여 Angular 애플리케이션에 다국어 변환 기능을 적용하는 방법을 정리해 보려고 한다.

다국어 변환에 있어서 Angular는 자체 i18n(Internationalization) 기능을 제공하므로 두가지 중 선택하면 된다.

 

 

ngx-translate 설치 및 사용법

https://github.com/ngx-translate/core    공식문서에도 설명이 굉장히 잘 돼있다.

 

 1. npm 모듈을 설치한다.

npm install @ngx-translate/core

 

2. 설치가 완료되면 상위모듈 (ex AppModule)에   TranslateModule 을 import한다.

(본인은 defaultModule)

이때 forRoot로 적용한다.  loader를 설정하기 위해 http-loader 패키지를 설치한다.

npm install @npx-translate/http-loader --save
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClientModule, HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http';
.
.
.

export function HttpLoaderFactory(http: HttpClient) {
	return new TranslateHttpLoader(http, 'assets/il8n/', '.json');
}

이 때 useFactory에 선언한 TranslateHttpLoader 함수에서 리턴하는 로더의 인자로 전달되는 경로에 번역을 위한 파일을 생성해야한다. 

이 json파일을 참고해 각각 키를 매핑된 값으로 바꿔주는 방식으로 translate가 동작한다.

 

경로가  assets/i18n/*.json 이므로 아래와 같은 경로에 원하는 언어의 파일을 생성해둔다.

 

 3.  default.component에  TranslateService  를 주입시키고 초기화 해주는 소스코드를 작성한다.

import {TranslateService} from '@ngx-translate/core';
import { OnInit, AfterViewInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
    selector: 'app-root',
    templateUrl: './default.component.html',
    styleUrls: ['./default.component.scss']
})
export class DefaultComponent implements OnInit , AfterViewInit {
    loading = false;
    public settings: Settings;
    public language: string;

    constructor(public appSettings: AppSettings,
                public router: Router,
                private translate: TranslateService,
                @Inject(PLATFORM_ID) private platformId: Object) {
        this.settings = this.appSettings.settings;
    }
    
    
    // 초기에는 언어 selection에 대한 데이터를 로컬 스토리지에서 얻고 
    // user selection에 따른 언어 변화를 가능하게 한다.
    
        ngOnInit() {
        if (isPlatformBrowser(this.platformId)) {

            this.language = localStorage.getItem('language');

        }
        if (this.language) {

            if (this.language === 'हिंदी') {
                this.translate.setDefaultLang('hi');
            } else if(this.language === 'English') {
                this.translate.setDefaultLang('en');
            } else if(this.language === 'Korea'){
                this.translate.setDefaultLang('ko');
            } else if(this.language === 'French'){
                this.translate.setDefaultLang('fr');
            }
        } else {
            this.translate.setDefaultLang('en');

        }
    }

 translate.use() 를 사용하면 해당언어로 template가 활성되지만 본인은 this.setDefaultLang()으로도 기능활성화가 가능했다. 

 

4. 템플릿 코드 

ngx-translate가 번역할 문자열들을 key로 대체하고 translate 파이프를 사용하여 템플릿을 수정한다.

 header-menu.component.html 

     <span>
                 
                    <div class="divider"></div>
                    <a mat-menu-item routerLink="/account/order-manage-order">
                        <mat-icon class="mat-icon-sm"><mat-icon>description</mat-icon>
                    </mat-icon>
                    
                    <span>{{'Shared.OrderHistory'|translate}}</span>
                    </a>
                    
                    <a mat-menu-item routerLink="/account">
                        <mat-icon class="mat-icon-sm">settings</mat-icon>
                        <span>{{'Shared.AccountSettings'|translate}}</span>
                    </a>
                    
                    <a mat-menu-item routerLink="/wishlist" fxHide="false" fxHide.gt-sm>
                        <mat-icon class="mat-icon-sm">favorite</mat-icon>
                        <span>{{'Shared.Wishlist'|translate}}({{commonSandbox.wishlistCount$ | async}})</span>
                    </a>
                    
                    <div class="divider"></div>
                    <a mat-menu-item (click)="signOut()">
                        <mat-icon class="mat-icon-sm">power_settings_new</mat-icon>
                        <span>{{'Shared.SignOut'|translate}}</span>
                    </a>
                    </span>

번역하고 싶은 단어들을 임의의 key로 대체하고  translate pipe 를 적용한다.

 {{ 'key' | translate }}  형식으로 템플릿을 모두 수정한 후 ngx-translate-extract 를 사용해 템플릿에 적용된 키를 json파일로 추출한다.  

 

 en.json 

 "Shared": {
        "WelcomeToOurMarket": "Welcome to our market!",
        "Hotline": "Hotline:(+100) 123 456 7890",
        "account": "Account",
        "sign": "Login/Register",
        "register": "register",
        "AccountSettings": "Account Settings",
        "LockScreen": "Lock screen",
        "OrderHistory": "My Order history",
        "Wishlist": "Wishlist",
        "Help": "Help",
        "SignOut": "Sign Out",
        "Remove": "Remove",
        "Categories": "Categories",
        "TypeToSearch": "What are you looking for ?",
        "ShoppingCart": "Shopping Cart",
        "ITEM": "ITEM",
        "VIEWCART": "VIEW CART",
        "YouHaveNoItemsInYourShoppingCart": "You have no items in your shopping cart.",
        "TOTAL": "TOTAL:",
        "Checkout": "Checkout",
        "ClearAll": "Clear All",
        "Home": "Home",
        "AllProducts": "All Products",
        "NewFabric":"New Fabric",
        "BestItem":"Best Item",
        "BestShop":"Best Shop",
        "Trend":"Trend",
        "Contact": "Contact",
        "TrackOrder": "Track Order",
        "USEFULLINKS": "USEFUL LINKS",
        "CONTACTINFORMATION": "CONTACT INFORMATION",
        "SOCIALMEDIA": "SOCIAL MEDIA",
        "Copyright": "Copyright © 2019,Piccosoft Software labs India Private Limited",
        "DateTime": "Mon - Sun / 9:00AM - 8:00PM",
        "Getdirections": "Get directions",
        "RoutesToUs": "RoutesToUs",
        "Price": "Price",
        "Email": "Email",
        "Name": "Name",
        "SignIn.": "Sign In",
        "ShopNow": "Shop now",
        "Status": "Status",
        "Date": "Date",
        "Order": "Order",
        "Cancel": "Cancel",
        "AddToCart": "Add to cart",
        "Clear": "Clear",
        "Search": "Search"
    },

 

 fr.json 

  "Shared": {
        "WelcomeToOurMarket": "Bienvenue sur notre marché!",
        "Hotline": "Hotline:(+100) 123 456 7890",
        "account": "Compte",
        "sign": "Connexion / S'inscrire",
        "register": "registre",
        "AccountSettings": "Paramètres du compte",
        "LockScreen": "Écran verrouillé",
        "OrderHistory": "Historique de mes commandes",
        "Wishlist": "Liste de souhaits",
        "Help": "Aidez-moi",
        "SignOut": "Déconnexion",
        "Remove": "Retirer",
        "Categories": "Les catégories",
        "TypeToSearch": "Que cherchez-vous ?",
        "ShoppingCart": "Chariot",
        "ITEM": "ARTICLE",
        "VIEWCART": "VOIR LE PANIER",
        "YouHaveNoItemsInYourShoppingCart": "Vous n'avez aucun article dans votre panier.",
        "TOTAL": "TOTALE:",
        "Checkout": "Check-out",
        "ClearAll": "Tout effacer",
        "Home": "Accueil",
        "AllProducts": "Tous les produits",
        "NewFabric":"Nouveau tissu",
        "BestItem":"meilleur article",
        "BestShop":"meilleur magasin",
        "Trend":"Tendance",
        "Contact": "Contact",
        "TrackOrder": "Suivi de commande",
        "USEFULLINKS": "LIENS UTILES",
        "CONTACTINFORMATION": "INFORMATIONS DE CONTACT",
        "SOCIALMEDIA": "MÉDIAS SOCIAUX",
        "Copyright": "Copyright © 2019 Piccosoft Software labs India Private Limited",
        "DateTime": "Lundi - dimanche / 9:00AM - 8:00PM",
        "Getdirections": "Obtenir des directions",
        "RoutesToUs": "ItinérairesVers",
        "Price": "Prix",
        "Email": "Email",
        "Name": "prénom",
        "SignIn.": "Se connecter",
        "ShopNow": "Achetez maintenant",
        "Status": "Statut",
        "Date": "Rendez-vous amoureux",
        "Order": "Ordre",
        "Cancel": "Annuler",
        "AddToCart": "Ajouter au panier",
        "Clear": "Claire",
        "Search": "Chercher"
    },

 

translate 모드 바꾸기

키값에 대치할 단어를 모두 작성했다면 알맞은 위치와 상황에서 언어를 바꿔주면 된다. 보통은 버튼을 클릭할 때 이벤트 핸들러에서 변경을 처리한다.

 

위에 defaultComponent 에서 TranslateService 를 주입받아 언어 사용 설정을 했던 것과 같이해주면 된다.

 header-menu.component.ts 

public changeLanguage(data, indexValue) {

    this.index = indexValue;
    if (isPlatformBrowser(this.platformId)) {
      this.language = localStorage.getItem('language');
       this.language = data.name;
       if (this.language === 'Hindi') {
         localStorage.setItem('language', 'Hindi');
         this.translate.setDefaultLang('hi');
       } else
      if (this.language === 'English') {
        localStorage.setItem('language', 'english');
        this.selectedLanguage='English';
        this.translate.setDefaultLang('en');
      } else if (this.language === 'French') {
        localStorage.setItem('language', 'french');
        this.selectedLanguage='French';
        this.translate.setDefaultLang('fr');
      }
       else if (this.language === 'Korea') {
        localStorage.setItem('language', 'Korea');
        this.selectedLanguage='Korea';
        this.translate.setDefaultLang('ko');
       }
     else {
        this.translate.setDefaultLang(data.code);

      }
    }
  }

 

 

완성후 모습 (상단 헤더메뉴)

오른쪽 상단 언어 선택 버튼 클릭 

 

French로 언어 설정시 모습

 

 

 

Reference

'Front-End > Angular' 카테고리의 다른 글

Angular 새로고침 방법  (0) 2022.04.18
Angular Directive  (0) 2022.01.27
Angular app.module.ts  (0) 2022.01.26
생명주기후크 ngOnInit()  (0) 2022.01.26
Angular 부모 자식 컴포넌트끼리 데이터 공유 @Input(), @Output()  (0) 2022.01.18
'Front-End/Angular' Related Articles more
Comments