1.首先你需要安装npm模块:

npm install @ngx-translate/core --save
npm install --save @ngx-translate/http-loader

2.添加多语言文件

src/app/assets/ 下创建 i18n 文件夹,并在文件夹内创建 en.jsonzh.json 文件

  • en.json
{
 "hello": "the word is hello"
}
  • zh.json
{
 "hello": "你好"
}

3.HTML

<h1>{{ 'hello' | translate }}</h1>

4.使用Translate服务

app 文件夹下新建文件 app.translation.module.ts

import { NgModule } from '@angular/core';
import { Http, HttpModule } from '@angular/http';

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { TranslateService } from '@ngx-translate/core';

export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

const translationOptions = {
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [Http]
  }
};

@NgModule({
  imports: [TranslateModule.forRoot(translationOptions)],
  exports: [TranslateModule],
  providers: [TranslateService]
})
export class AppTranslationModule {
  constructor(private translate: TranslateService) {
    //添加语言支持
    translate.addLangs(["en","zh"]);
    //设置默认语言,一般在无法匹配的时候使用
    translate.setDefaultLang('zh');
    //设置当前语言
    // translate.use('en');
    //获取当前浏览器环境的语言比如en、 zh
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
  }
}