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();
}