Angular primeNg i18n 国际化多语言处理

i18n API 允许为组件全局设置翻译并与翻译库集成。 PrimeNg 官网相关地址

详细步骤如下：

 1：安装如下两个包。一个是翻译的一个是语音请求的

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

2：项目 assets目录下创建 en.json 和 zh.json 两个文件或者更多国际化的文件

3：en.json内容如下，请根据你的项目来实际处理

{
    "menu.accept": "Accept",
    "menu.reject": "Cancel",
    "menu.changeLang2Zh":"Change to Chinese",
    "menu.changeLang2en":"Change to English"
}

4：zh.json内容如下

{
    "menu.accept": "接收",
    "menu.reject": "拒绝",
    "menu.changeLang2Zh":"翻译为中文",
    "menu.changeLang2en":"翻译为英文"
}

5：app.module.ts 中code如下

import { TranslateModule,TranslateLoader } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http,'../assets/i18n/',".json");
}

@NgModule({
  declarations: [
    AppComponent, HomeComponent,
    TopComponent, MenuComponent,
    ProductComponent,BodyComponent
  ],
  imports: [
    BrowserModule, AppRoutingModule,
    BrowserAnimationsModule,
    ButtonModule, FormsModule,
    CalendarModule, PanelMenuModule,

//如下
HttpClientModule,
TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  }
})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6： 在需要翻译或者多语言翻译的页面上处理，如案例：

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

import { PrimeNGConfig } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrl: './menu.component.scss'
})
export class MenuComponent {
  menuitems: MenuItem[];
  constructor(private config: PrimeNGConfig,private translateService:TranslateService) {
    this.menuitems = [
      {
        label: 'product',
        icon: 'pi pi-fw pi-home',
        routerLink: '/home/product'
      },
      {
        label: 'top',
        icon: 'pi pi-fw pi-info-circle',
        routerLink: '/home/top'
      }]
  }
  ngOnInit() {
    // this.config.setTranslation({ // 这里没有使用到
    //   accept: 'Accept',
    //   reject: 'Cancel'
    // });
    this.translateService.setDefaultLang("zh");
  }
  switchLanguage(languae:string){  //点击按钮确认翻译
    this.translateService.use(languae);
  }
}

7：在一个页面上使用翻译的code如下

<p>menu works!</p>

<div>{{"menu.accept"|translate}}</div>

<p-button icon="pi pi-iconName" label="{{'menu.changeLang2Zh'|translate}}" (onClick)="switchLanguage('zh')"></p-button>
<p-button icon="pi pi-iconName" label="{{'menu.changeLang2en'|translate}}"  (onClick)="switchLanguage('en')" [style]="{'margin-left': '6px'}"></p-button>

<p-panelMenu [model]="menuitems" [style]="{'width':'300px'}"></p-panelMenu>

8:测试截图如下

9：小结

　　在实际项目中，通常都是统一来设置当前环境为哪一个语言，并不会在每一个页面这样硬编码 this.translateService.setDefaultLang("zh"); 
 具体为哪一种语言我们可以选择 h5的 localStorage.getItem("")，

localStorage.setItem("", "") 来全局获取和设置 或者Angular 的service服务来统一处理也是可行的方案，具体的语言切换如通过页面的下拉选择来修改当前web的语言即可