Angular增加国际化支持

执行

ng new

命令新建一个工程

然后执行下面命令安装bootstrap所需要的组件

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

打开pp.module.ts，增加

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}
  imports: [
    NgbModule.forRoot(),
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
  ]

打开assets/i18n/zh.json文件并增加

{
    "Dashboard": "控制面板"
}

打开app.component.ts文件并增加

import { TranslateService } from '@ngx-translate/core';

  constructor(private translate: TranslateService) {
    translate.addLangs(['en', 'zh']);
    translate.setDefaultLang('zh');
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|zh/) ? browserLang : 'zh');
}

打开app.component.html文件并增加

<div class="row">
  <div class="col-xl-12">
      <h2 class="page-header">
          {{ 'Dashboard' | translate }}
      </h2>
  </div>
</div>

执行

ng server

命令并用浏览器测试