Angle 8的国际化可翻译整个应用程序 [英] Internationalization in angular 8 to translate whole application
本文介绍了Angle 8的国际化可翻译整个应用程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用选定的语言翻译我的整个应用程序.我有一个使用i18n进行翻译的示例.但是我不知道如何在我的应用程序中实现它.
I want to translate my whole application with selected language. I got a example which is using i18n to translate. but i am not understand that how to implement it in my application.
推荐答案
您只需按照我的一些说明进行操作即可.
You just follow my few instructions for better understanding.
- 在您的应用程序中安装ngx-translate npm软件包.
npm i @ngx-translate/core --save
- 现在您需要安装http-loader
npm install @ngx-translate/http-loader --save
- 现在将此代码添加到您的AppModule.ts文件中
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: myHttpLoader,
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export function myHttpLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
- 在/assets/i18n/文件夹中为语言(例如印地文,英语等)创建翻译文件.
//1. first file name: en.json
{
"Title":"Welcome"
}
//2. second file name: hi.json
{
"Title":"स्वागत हे"
}
//Note: you can use google translate to convert into any language.
- 在您的组件ts文件中导入翻译服务.
import {TranslateService} from '@ngx-translate/core';
export class AppComponent {
constructor(translate: TranslateService) {
translate.addLangs(['en', 'hi'])
translate.setDefaultLang('en');
translate.use('en');
}
//if user on change language
switchLanguage(language: string) {
this.translate.use(language);
}
}
- 在html文件中
<p translate>Title</p>
<button (click)="switchLanguage('en')">English</button>
<button (click)="switchLanguage('hi')">Hindi</button>
保持编码.享受!
希望对您有帮助.:)
这篇关于Angle 8的国际化可翻译整个应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文