Angular primeNg i18n 國際化多語言處理

天天向上518發表於2024-05-28
Angular

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的語言即可

相關文章