Wie übersetzt man nur einen Teil der HTML Seite mit i18n

Question

Ich versuche Logik zu bauen, um nur einen Teil der Seite (Modul) mit i18n lib zu übersetzen.

ich habe i18n global eingestellte Sprache auf Seite zu ändern, wenn ich die Sprache zu ändern, aber ich würde ein Modul wie auf dieser Seite haben (wie eine Art Vorschau für E-Mail) auf andere Sprache, die ich an diesem Modul ändern kann über ein Dropdown-Feld Wie eine Art Zielfernrohr.

Ich benutze Aurelia-i18n 1.4.0 Version.

ist es möglich <span t="messages.hello_message">hello<span> einzustellen, um nach lokalen Moduländerungen für die Sprache und nicht die globale zu suchen, aber wieder die gleichen Übersetzungsdateien wie global zu verwenden.

Hat jemand ein ähnliches Problem oder eine Idee, wie kann ich das tun? Vielen Dank. :)

Answer 1

Sie können das nicht aus der Box tun. Wenn Sie das aktive Gebietsschema mit setLocale ändern, löst die Methode ein Ereignis aus und signalisiert eine Aktualisierung des Bindungsverhaltens https://github.com/aurelia/i18n/blob/master/src/i18n.js#L54. Das TCustomAttribute wartet auf diese Änderungen und rendert Bindings automatisch neu. Sie können jedoch Ihr eigenes benutzerdefiniertes Attribut erstellen, wie hier gezeigt https://github.com/aurelia/i18n/blob/master/src/t.js, und die Methoden bind und unbind überschreiben, in denen Sie die Bedingung definieren, wann die Aktualisierung der Übersetzungen erfolgen soll.

--- Aktualisierung mit Beispiel ---

Ok also hier ist ein kleines Beispiel, was ich darüber nachdachte, vielleicht nicht die schönste Art und Weise sein, aber es sollte es tun.

In Ihrem main.js eine neue globalResources hinzufügen

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

jetzt eine Datei erstellen 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() {} 
} 

Dies schafft im Wesentlichen ein neues Attribut foo genannt, die die TCustomAttribute erstreckt und überschreibt die bind/unbind Methoden zum Ausschließen der Signalisierung und des Abhörens von sprachveränderten Ereignissen.

Ihrer Ansicht nach können Sie jetzt

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

verwenden jetzt die Sprache Makeln das t Attribut wie gewohnt ändern, aber die foo halten, wie es ist.