Angular 4 i18n示例如何实现角度4中的i18n 4
问题描述:
如何实现角度中的i18n 4.我是角度4中的新角色。我想在角度4项目中实现i18n
。这个角度4项目由角CLI
生成。请帮我,我该怎么做。Angular 4 i18n示例如何实现角度4中的i18n 4
在此先感谢
答
这是如此简单。只要做到:
npm install @ngx-translate/core @ngx-translate/http-loader --save
那么你应该建立在〜/ src目录/资产的文件夹名称为i18n
,并导入app.module.ts
模块
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClientModule, HttpClient} from '@angular/common/http';
进口之前,所有模块你需要补充:
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
然后......在@NgModule
进口
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
而且,完成添加translateService
// ngx-translate
import { TranslateService } from '@ngx-translate/core';`
声明的构造函数,然后设置默认语言
constructor(public translate: TranslateService) {
translate.addLangs(["en", "es"]);
translate.setDefaultLang('en');
let browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|es/) ? browserLang : 'en');
}
上述过程完成后,您需要创建文件:
〜/ src目录/资产/ es.json和〜/ src目录/资产/ en.json我的情况与此格式:
{
"CARD": {
"NAME": "Celiz Morante Matias Nahuel",
"TITLE": "Full Stack JS Developer",
"EMAIL": "[email protected]",
"PHONE": "+549....",
"SKYPE": "enl...",
"ADDRESS": "Jo.. Inge... ...40",
"GITHUB": "https://github.com/G33N",
"LINKEDIN": "https://www.linkedin.com/in/matias-nahuel-celiz-morante-994719149/"
},
"EXPERIENCE": {
"TITLE": "Experience"
},
"EDUCATION": {
"TITLE": "Education"
},
"PORTFOLIO": {
"TITLE": "Portfolio"
},
"FOOTER": {
}
}
而且这是在模板调用方式:
<h2>{{ 'EXPERIENCE.TITLE' | translate }}</h2>
简历谢谢鲍勃,我会尝试国际化这个 –
官方角4文档: https://v4.angular.io/guide/i18n ---官方角5的i18n文件: https://angular.io/guide/i18n –