저는 angularJs (버전 4)로 작성된 응용 프로그램을 보유하고 있습니다. 이 응용 프로그램을 두 언어 (프랑스어 및 영어)로 사용 가능하게 만들고 싶습니다. 공식 문서를 확인했지만 혼란스럽고 어떻게해야하는지 알지 못했습니다. 아무도 내 애플 리케이션을 번역하는 간단한 단계를 제공 할 수 있습니까? 미리 감사드립니다.각도 : Angular4에서 다국어 지원을 사용하는 방법
2
A
답변
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
관련 문제
- 1. SPA에서 다국어 지원을 구현하는 방법
- 2. wordpress.com 블로그에서 다국어 지원을 활성화하는 방법
- 3. 다국어 지원을 위해 채택 할 방법은 무엇입니까
- 4. 클라이언트와 서버의 다국어 지원을 한 번에
- 5. angular4에서 스타일 시트 가져 오기
- 6. Yocto 빌드에 다국어 지원을 추가하는 방법은 무엇입니까?
- 7. 다국어 지원을 위해 JSP를 구현하는 방법 (포르투갈어, 러시아어와 같이)
- 8. 내 jsf 응용 프로그램에서 다국어 지원을 완벽하게 제공하는 방법
- 9. Angular4에서 json 파일에 액세스하는 방법
- 10. angular4에서 TemplateRef의 createEmbeddedView 메소드를 사용하는 방법은 무엇입니까?
- 11. ngmodel angular4에서 동적 속성 바인딩을 설정하는 방법
- 12. androids 다국어 지원을 사용하여 언어를 동적으로 변경 하시겠습니까?
- 13. 데이터베이스를 사용하는 다국어 웹 사이트
- 14. Codeigniter를 사용하는 다국어
- 15. 다국어 지원을 위해 .rc 파일을 사용 /로드하는 방법은 무엇입니까?
- 16. xml/json 지원을 사용하는 globalize2
- 17. AVD 4.2에서 다중 사용자 지원을 사용하는 방법
- 18. 데이터베이스에서 다국어 데이터를 사용하는 가장 좋은 방법
- 19. Yii를 다국어 데이터베이스 모델과 함께 사용하는 방법?
- 20. angular4에서 선택 초기 값 지정
- 21. 각도 조절기를 사용하는 방법
- 22. 각도 라우팅을 사용하는 방법?
- 23. OpenGL 지원을 사용하는 Docker의 ParaView
- 24. J2ME 응용 프로그램에서 다국어 지원을 구현하는 가장 좋은 방법은 무엇입니까?
- 25. 다국어 지원을 구현하려고 할 때 응용 프로그램이 중단됩니다.
- 26. Flexslider가 Angular4에서 작동하지 않습니까?
- 27. Django-CMS 다국어 및 다국어 하위 사이트
- 28. Angular4에서 실패한 http put을 처리하는 방법
- 29. angular4에서 여러 대화 상자를 여는 방법
- 30. Angular2/Angular4에서 테이블 열 정렬 방법은 무엇입니까?