前言
本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
npm 安装 ngx-translate 模块
在 Angular 项目配置
app.module.ts
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,useFactory: (createTranslateHttpLoader),deps: [Http]
}
})
]
结果如下：
export function createTranslateHttpLoader(http: Http) {
return new TranslateHttpLoader(http,'./assets/i18n/','.json');
}
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,HttpModule,TranslateModule.forRoot({
loader: {
provide: TranslateLoader,deps: [Http]
}
})
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
}
ngOnInit() {
// --- set i18n begin ---
this.translateService.addLangs(["zh","en"]);
this.translateService.setDefaultLang("zh");
const browserLang = this.translateService.getBrowserLang();
this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
// --- set i18n end ---
}
结果如下：
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(public translateService: TranslateService) {
}
ngOnInit() {
// --- set i18n begin ---
this.translateService.addLangs(["zh","en"]);
this.translateService.setDefaultLang("zh");
const browserLang = this.translateService.getBrowserLang();
this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
// --- set i18n end ---
}
}
添加多语言文件
在 src/app/assets/ 下创建 i18n 文件夹，并在文件夹内创建 en.json 和 zh.json 文件
测试
app.component.html
