2017-11-24 8 views
2

저는 angularJs (버전 4)로 작성된 응용 프로그램을 보유하고 있습니다. 이 응용 프로그램을 두 언어 (프랑스어 및 영어)로 사용 가능하게 만들고 싶습니다. 공식 문서를 확인했지만 혼란스럽고 어떻게해야하는지 알지 못했습니다. 아무도 내 애플 리케이션을 번역하는 간단한 단계를 제공 할 수 있습니까? 미리 감사드립니다.각도 : Angular4에서 다국어 지원을 사용하는 방법

답변

2

이 패키지는 좋은 도구 느릅 나무 당신이 원하는 것을 달성 할 수있다 NGX-번역 설치하려면이 plunker sample

명령의 샘플 구성 및 작동 예를 찾을 수 있습니다. 여기 단계적으로 수행하는 방법입니다 : 정의 당신의 언어 파일을

npm install @ngx-translate/core --save 

    npm install @ngx-translate/http-loader --save 

을 : 처음 설치
NGX-번역 en.json 파일을 만들고 내용은 다음과 같아야합니다

{ 
    "TEXT": "your text in english here! ", // add many as you need ! 
} 

프랑스어 번역하여 fr.json 파일에 대해 동일한

편집하여 app.module.ts : 이제
당신처럼 템플릿으로 변환 파이프를 사용할 수 있어야합니다 다음 @NgModule 데코레이터 수입

import {TranslateModule, TranslateLoader} from "@ngx-translate/core"; 
    import {TranslateHttpLoader} from "@ngx-translate/http-loader"; 

    export function HttpLoaderFactory(httpClient: HttpClient) { 
     return new TranslateHttpLoader(httpClient, "i18n/", ".json"); 
    } 

파이프를 번역 TranslateModule.forRoot()
사용을 추가 이 :

{{ 'TEXT' | translate }} 

이제 사용자는 언어를 변경할 권한을 부여 받아야합니다. 구성 요소를 변경해야 할하기 위해 : 생성자 import {TranslateService} from '@ngx-translate/core'; 변경 :

constructor(private translate: TranslateService) { 
     translate.addLangs(["en", "fr"]); 
     translate.setDefaultLang('en'); 

     let browserLang = translate.getBrowserLang(); 
     translate.use(browserLang.match(/en|fr/) ? browserLang : 'en'); 
    } 

당신이 당신의 HTML 템플릿이 같은 추가 사용자가 현재 langauge을 변경할 수 있도록를 이 가져 오기를 추가 :

<select #langSelect (change)="translate.use(langSelect.value)"> 
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option> 
     </select> 

행운을 빈다.

2

Ng translate는 angular2에서 지원하지 않습니다. angular2 및 4 웹 응용 프로그램에서 ngx-translate을 사용할 수 있습니다.

npm install @ngx-translate/core --save 

npm install @ngx-translate/http-loader --save 
관련 문제