Project multilingual internationalization:
ngx-translate
1. Installation
npm install --save @ngx-translate/core
npm install --save @ngx-translate/http-loader
It should be noted that if it is the version of Angular 5.x, you need to specify the version of ng-translate as 9.x. The current latest version is 10.x, suitable for Angular v6, if it is Angular v5, an error will be reported
2. Introduce in the root module:
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
...
imports:[
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
]
...
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
3. Create i18n folder
Create multilingual files according to different languages
4. Use
Inject in
app.component.ts
,
import {TranslateService} from '@ngx-translate/core';
The default language file can be defined in the constructor:
constructor(
private translate: TranslateService) {
translate.setDefaultLang('en');
// Get the language of the current browser environment such as en, zh
const broswerLang = translate.getBrowserLang();
translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : 'zh-CN');
}
Use in view: pass the translate pipeline
{{ 'thTLabel' | translate }}
There are more ways to use, you can check the official website: