多語系

外掛模組可以使用獨立的多語系檔案，與 UOF X 及其他模組的語系隔離。

多語系分為兩種類型：

• 設定檔多語系：設定檔中的 name 欄位支援多語系
• 內容多語系：在程式碼中使用的翻譯內容

建立語系檔

在 assets/i18n/ 目錄下建立語系檔案：

assets/
└── i18n/
    ├── zh-TW.json
    ├── zh-CN.json
    └── en-US.json

語系檔範例 zh-TW.json：

{
  "title.main": "主標題",
  "button.save": "儲存",
  "button.cancel": "取消",
  "message.welcome": "歡迎 {{name}}!"
}

設定檔多語系

設定檔中的 name 欄位使用翻譯 key，系統會自動從語系檔取得對應翻譯。若語系檔中找不到對應的 key，則直接顯示 name 欄位的值。

以下設定檔支援多語系的 name 欄位：

設定檔	支援欄位
fields-design.json	fieldGroups[].name, fields[].name
panels-design.json	admin[].name, user[].name, app[].name
routes.json	*.menu.name, *.menu.children[].name

fields-design.json：

{
  "fieldGroups": [
    {
      "id": "basic",
      "name": "fieldGroup.basic"
    }
  ]
}

assets/i18n/zh-TW.json：

{
  "fieldGroup.basic": "基本資料"
}

assets/i18n/en-US.json：

{
  "fieldGroup.basic": "Basic Information"
}

內容多語系

若當前語系找不到對應的翻譯，會自動套用繁體中文 (zh-TW) 的內容。

Import 相依

import { UofxPluginTranslateModule, UofxPluginTranslateService } from '@uofx/plugin';

@NgModule({
  imports: [UofxPluginTranslateModule],
  providers: [UofxPluginTranslateService]
})
export class ExampleModule { }

使用方法

Pipe 用法

<!-- 基本用法 -->
{{ 'button.ok' | uofxTranslate }}

<!-- 帶參數 -->
{{ 'message.welcome' | uofxTranslate:{ name: userName } }}

Directive 用法

<!-- 屬性綁定 -->
<span [uofxTranslate]="'button.ok'"></span>

<!-- 帶參數 -->
<p [uofxTranslate]="'message.welcome'" [uofxTranslateParams]="{ name: userName }"></p>

Service 用法

import { inject } from '@angular/core';
import { UofxPluginTranslateService } from '@uofx/plugin';

export class ExampleComponent {
  private translateService = inject(UofxPluginTranslateService);

  // 基本翻譯
  text = this.translateService.trans('button.submit');

  // 帶參數
  greeting = this.translateService.trans('message.hello', { name: 'John' });
}