如何翻譯只有一部分的HTML頁面與國際化

Question

我試圖建立邏輯翻譯只有一部分的頁面（模塊）與I18n庫。

我已經在全球範圍內設置了i18n，當我改變語言時在頁面上改變語言，但是我想在該頁面上有一個模塊（就像某種電子郵件的預覽），我可以通過不同的語言一些下拉字段。像某種有限範圍的國際化一樣。

我使用Aurelia大街，國際化1.4.0版本。

是否可以將<span t="messages.hello_message">hello<span>設置爲注意本地語言模塊的更改，而不是全局模塊更改，但再次使用與全局相同的翻譯文件。

有沒有人有一些類似的問題或想法，我怎麼能做到這一點？謝謝。 :)

Answer 1

你不能那樣開箱。當您使用setLocale更改活動語言環境時，該方法會觸發事件並向綁定行爲發出更新信號https://github.com/aurelia/i18n/blob/master/src/i18n.js#L54。 TCustomAttribute偵聽這些更改並自動提交綁定。你可以做的是創建你自己的自定義屬性，如https://github.com/aurelia/i18n/blob/master/src/t.js所示，並且重寫綁定和解除綁定方法，當你需要更新翻譯時定義條件。

---更新與例子---

好了，所以這裏有一個小例子，我在想，可能不是最好的方式，但它應該這樣做。

在你main.js添加新globalResources

export function configure(aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .plugin('aurelia-i18n', (instance) => { 
     ... 
    }) 
    .globalResources("./foo-custom-attribute") // <-- this here 

現在創建一個文件foo-custom-attribute.js

import {TCustomAttribute} from 'aurelia-i18n'; 
import {customAttribute} from 'aurelia-framework'; 

@customAttribute('foo') 
export class FooCustomAttribute extends TCustomAttribute { 
    constructor(element, i18n, ea, tparams) { 
    super(element, i18n, ea, tparams); 
    } 

    bind() { 
    this.params = this.lazyParams(); 

    if (this.params) { 
     this.params.valueChanged = (newParams, oldParams) => { 
     this.paramsChanged(this.value, newParams, oldParams); 
     }; 
    } 

    let p = this.params !== null ? this.params.value : undefined; 
    this.service.updateValue(this.element, this.value, p); 
    } 

    unbind() {} 
} 

這本質上創建一個新的屬性稱爲foo，它擴展了TCustomAttribute並覆蓋綁定/取消綁定方法來排除信號並收聽語言改變的事件。

在你看來，你現在可以使用

<span t="demo"></span> 
<span foo="demo"></span> 

現在切換語言會改變t屬性，像往常一樣，但將保持foo，因爲它是。