Angular + i18n多語系

2024-10-30

9
0
前端開發
2024-11-01

Angular + i18n多語系
angular + .net framework mvc5 如何建置i18n多語系
mvc要如何判調要調用哪個語系的angular程式

安裝多語系套件

ng add @angular/localize

要多語系翻譯的元素加上i18n的html attribute

加上i18n attribute的html element等下會被轉換成語言檔。我們可以在i18n attribute後面加上@@來設定id。到時候產出的範本檔的id就不會是很長的一串亂數了。

<div class="card-header" i18n="@@testid_1">
	ConfigShowHide
</div>

<div class="col-6">
	<label for="isShowRefdesText" i18n>
		<input type="checkbox" id="isShowRefdesText" formControlName="isShowRefdesText" (change)="onCheckBoxChange($event)" />
		ShowRefdesText
	</label>
</div>

產生語系範本

新增範本檔

# --out-path 用來指定編譯完的檔案要放在哪裡
ng extract-i18n --output-path src/locale

在src下產生一份範本檔(src/locale/messages.xlf)，內容大概長這樣。可以看到ShowRefdesText多了很多不相關的東西，把checkbox的onChange()事件都給包進去了，但ChatGPT後，是告訴我不會影響到翻譯。

略...
      <trans-unit id="testid_1" datatype="html">
        <source> ConfigShowHide </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/control-panel-features/config/config.component.html</context>
          <context context-type="linenumber">9,10</context>
        </context-group>
      </trans-unit>
      
      <trans-unit id="8165548348396053863" datatype="html">
        <source><x id="TAG_INPUT" ctype="x-input" equiv-text="&lt;input type=&quot;checkbox&quot; id=&quot;isShowRefdesText&quot; formControlName=&quot;isShowRefdesText&quot; (change)=&quot;onCheckBoxChange($event)&quot; /&gt;"/> ShowRefdesText</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/control-panel-features/config/config.component.html</context>
          <context context-type="linenumber">16,17</context>
        </context-group>
      </trans-unit>

新增其他語系的語言檔

這邊新增三個語言檔來作測試：

英文語言檔[messages.en.hant.xlf]
繁體中文語言檔[messages.zh.hant.xlf]
簡體中文語言檔[messages.zh.hans.xlf]

英文語言檔由於範本檔裡的標籤已經是英文了，所以不用再編輯內容，改檔名即可。繁體. 簡體中文語言檔用剛剛產生的範本檔[messages.xlf]複製修改即可。在source標籤下新增一個target標籤，並將翻譯的結果用target標籤包起來。

      <!--messages.zh.hant.xlf 繁體中文-->
      <trans-unit id="testid_1" datatype="html">
        <source>ConfigShowHide</source>
        <target>顯示/隱藏</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/control-panel-features/config/config.component.html</context>
          <context context-type="linenumber">10</context>
        </context-group>
      </trans-unit>
      
      <trans-unit id="8165548348396053863" datatype="html">
        <source><x id="TAG_INPUT" ctype="x-input" equiv-text="&lt;input type=&quot;checkbox&quot; id=&quot;isShowRefdesText&quot; formControlName=&quot;isShowRefdesText&quot; (change)=&quot;onCheckBoxChange($event)&quot; /&gt;"/> ShowRefdesText</source>
        <target><x id="TAG_INPUT" ctype="x-input" equiv-text="&lt;input type=&quot;checkbox&quot; id=&quot;isShowRefdesText&quot; formControlName=&quot;isShowRefdesText&quot; (change)=&quot;onCheckBoxChange($event)&quot; /&gt;"/> 顯示Refdes Text</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/control-panel-features/config/config.component.html</context>
          <context context-type="linenumber">16,17</context>
        </context-group>
      </trans-unit>

      <!--messages.zh.hans.xlf 簡體中文-->
      <trans-unit id="testid_1" datatype="html">
        <source>ConfigShowHide</source>
        <target>显示/隐藏</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/control-panel-features/config/config.component.html</context>
          <context context-type="linenumber">10</context>
        </context-group>
      </trans-unit>
      <trans-unit id="8165548348396053863" datatype="html">
        <source><x id="TAG_INPUT" ctype="x-input" equiv-text="&lt;input type=&quot;checkbox&quot; id=&quot;isShowRefdesText&quot; formControlName=&quot;isShowRefdesText&quot; (change)=&quot;onCheckBoxChange($event)&quot; /&gt;"/> ShowRefdesText</source>
        <target><x id="TAG_INPUT" ctype="x-input" equiv-text="&lt;input type=&quot;checkbox&quot; id=&quot;isShowRefdesText&quot; formControlName=&quot;isShowRefdesText&quot; (change)=&quot;onCheckBoxChange($event)&quot; /&gt;"/> 显示Refdes Text</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/features/control-panel-features/config/config.component.html</context>
          <context context-type="linenumber">16,17</context>
        </context-group>
      </trans-unit>

修改Angular.json

預設為繁體中文zh-Hant，如果預設語系為英文，則使用en-US。

Angular.json => {{專案名稱}} => i18n

  "projects": {
    "{{angular專案名稱}}": {
      "i18n": {
		"sourceLocale": "zh-hant",
        "locales": {
          "en-US": {
            "translation": "src/locale/messages.en.xlf",
            "baseHref": "/en/"
          },        
          "zh-hant": {            
            "translation": "src/locale/messages.zh.hant.xlf",
            "baseHref": "/zh-hant/"
          },
          "zh-hans": {
            "translation": "src/locale/messages.zh.hans.xlf",
            "baseHref": "/zh-hans/"
          }
        }
      }
	}
	略...
}

Angular.json => {{專案名稱}} => architect => build => configurations

localize的值對應的是i18n設定的語系。

"en": {
	"localize": ["en-US"]
},
"tw": {
	"localize": ["zh-hant"]
},
"cn": {
	"localize": ["zh-hans"]
}

Angular.json => {{專案名稱}} => architect => serve => configuration (本機測試)

browserTarget的值對應的是buil.configuration的語系屬性。

"en": {
	"browserTarget": "navigator-viewer:build:en"
},
"tw": {
	"browserTarget": "navigator-viewer:build:tw"
},
"cn": {
	"browserTarget": "navigator-viewer:build:cn"
}