lit-translate - get() 不返回键的值
lit-translate - get() not returning the key's value
我正在为 LitElement 项目使用优秀的 JS i18n 库 lit-translate
。如果我理解正确,get("foo.bar")
应该从包含翻译的 JSON 文件中获取该键的值。
但是,在我的项目中,get("foo.bar")
不是 return 密钥的值,而是 return 的 [foo.bar]
。 translate("foo.bar")
有效,但仅在 LitElement 的 HTML 结构内,如 <p>${translate("foo.bar")}</p>
。在这种结构之外,例如在 LitElement 的 constructor()
部分或只是在 LitElement class 定义之外,translate("foo.bar")
仅 returns part => { partCache.set(part, cb); updatePart(part, cb); }
.
如何通过get()
简单的获取一个key的值?我仍然是 JavaScript 新手,可能忽略了一些东西,但是什么?感谢您的帮助!
这是我的代码(相关部分):
// app-shell.js
// … several module imports …
import {
registerTranslateConfig,
use,
get,
translate
} from "@appnest/lit-translate";
// … the LitElement class and other stuff …
// the lit-element contains the following code, which works like a charm:
// render() {
// return html`
// <p>${translate("header.title")}</p> // RETURNS REAL RESULT
// `;
// }
// registers AppShell as as web component named app-shell with the browser
customElements.define("app-shell", AppShell);
// registers the translation loader
registerTranslateConfig({
loader: lang =>
fetch(`../../_locales/${lang}/i18n.json`).then(res => res.json())
});
// sets the app's language
use(store.getState().app_shell.language); // store… returns "en", "de" or "fr"
// updates the application bar's title and the local storage entry
const title = get("header.title"); // RETURNS "[header.title]". WHY?
document.getElementById("title").innerText = title;
localStorage.setItem("title", title);
问题已确定(请参阅对我的问题的评论)。这是我的 LitElement 中缺少的内容:
//
constructor() {
super();
// defers the first update of the component until the strings have been loaded
// to avoid empty strings being shown
this.hasLoadedStrings = false;
}
// overwrites default updating behavior
shouldUpdate(changedProperties) {
return this.hasLoadedStrings && super.shouldUpdate(changedProperties);
}
// loads the initial language and marks that the strings have been loaded
async connectedCallback() {
// sets the app's language;
await use(store.getState().app_shell.language);
this.hasLoadedStrings = true;
super.connectedCallback();
}
我正在为 LitElement 项目使用优秀的 JS i18n 库 lit-translate
。如果我理解正确,get("foo.bar")
应该从包含翻译的 JSON 文件中获取该键的值。
但是,在我的项目中,get("foo.bar")
不是 return 密钥的值,而是 return 的 [foo.bar]
。 translate("foo.bar")
有效,但仅在 LitElement 的 HTML 结构内,如 <p>${translate("foo.bar")}</p>
。在这种结构之外,例如在 LitElement 的 constructor()
部分或只是在 LitElement class 定义之外,translate("foo.bar")
仅 returns part => { partCache.set(part, cb); updatePart(part, cb); }
.
如何通过get()
简单的获取一个key的值?我仍然是 JavaScript 新手,可能忽略了一些东西,但是什么?感谢您的帮助!
这是我的代码(相关部分):
// app-shell.js
// … several module imports …
import {
registerTranslateConfig,
use,
get,
translate
} from "@appnest/lit-translate";
// … the LitElement class and other stuff …
// the lit-element contains the following code, which works like a charm:
// render() {
// return html`
// <p>${translate("header.title")}</p> // RETURNS REAL RESULT
// `;
// }
// registers AppShell as as web component named app-shell with the browser
customElements.define("app-shell", AppShell);
// registers the translation loader
registerTranslateConfig({
loader: lang =>
fetch(`../../_locales/${lang}/i18n.json`).then(res => res.json())
});
// sets the app's language
use(store.getState().app_shell.language); // store… returns "en", "de" or "fr"
// updates the application bar's title and the local storage entry
const title = get("header.title"); // RETURNS "[header.title]". WHY?
document.getElementById("title").innerText = title;
localStorage.setItem("title", title);
问题已确定(请参阅对我的问题的评论)。这是我的 LitElement 中缺少的内容:
//
constructor() {
super();
// defers the first update of the component until the strings have been loaded
// to avoid empty strings being shown
this.hasLoadedStrings = false;
}
// overwrites default updating behavior
shouldUpdate(changedProperties) {
return this.hasLoadedStrings && super.shouldUpdate(changedProperties);
}
// loads the initial language and marks that the strings have been loaded
async connectedCallback() {
// sets the app's language;
await use(store.getState().app_shell.language);
this.hasLoadedStrings = true;
super.connectedCallback();
}