Lit-translate 显示代码或密钥而不是翻译

Question

我正在尝试使用 lit-translate 将我的“Elmish”打字稿网站翻译成不同的语言。我使用 webpack 和 dotnet。

在我的 index.ts 中，我注册了翻译配置：

registerTranslateConfig({
    lookup: (key, config) => config.strings != null ? config.strings[key] : key,
    empty: key => key,
    loader: lang => {
          return new Promise((resolve, reject) => {
            resolve({"title": "Der Titel"});
          })}   
    });

use("en");

（加载程序是硬编码的，因为获取本地化文件也不起作用，但现在这并不重要）。

在 html 中，我使用 get("title") 或 translate("title") 来获取翻译。我不是翻译，而是阅读 [title] 或 (part) => { partCache.set(part, cb); updatePart(part, cb); }

如果我将 translate() 的结果分配给一个变量，我在对象中得到以下结果：

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.r (<anonymous>:1:83)
    at Module../src/index.ts (http://localhost:8080/app.bundle.js:9800:10)
    at __webpack_require__ (http://localhost:8080/app.bundle.js:12476:33)
    at http://localhost:8080/app.bundle.js:13494:11
    at http://localhost:8080/app.bundle.js:13497:12

我已经试过禁用 webpack 严格模式。

完整的 class 如下所示：

export class App extends Application<Model, Message, {}> {
  @property({type: Boolean})
  hasLoadedStrings = false;

    init(): [Model, Cmd] {
    const initModel: Model = {
      openPage: [{title: "Home"}, home]
    }

    return [initModel, Cmd.none]
  }

  constructor() {
    super();
    this.hasLoadedStrings = false;
  }

  shouldUpdate (changedProperties: Map<string | number | symbol, unknown>) {
    return this.hasLoadedStrings && super.shouldUpdate(changedProperties);
  }

  async connectedCallback () {
    super.connectedCallback();
 
    await use("en");
    this.hasLoadedStrings = true;
  }

}

customElements.define('my-element', App);

Answer 1

我通过编写自己的小翻译库解决了这个问题。如果您按照文档中的建议使用 lit-translate 包，则会出现错误，因此请随意使用我的解决方案：

translate.ts:

const de_config = 
{
  "Category": {
    "Home": "Start",
  },
  "Home": {
    "Welcome back,": "Willkommen zurück,"
};

export function translate(key: string) {

    const keyParts = key.split(".");
    const keyCategory = keyParts.shift();
    const keyWord = keyParts.join('.');

    let translationIndexes = typedKeys(de_config);

    for(let translationIndex of translationIndexes)
    {
      if(translationIndex == keyCategory) {
        let translationKeys = typedKeys(de_config[translationIndex]);
        
        for(let translationKey of translationKeys) {
            if(translationKey == keyWord) {
              return de_config[translationIndex][translationKey];         
          }
        }
      }
    }
    return key;  
  }

function typedKeys<T>(o: T): (keyof T)[] {
    return Object.keys(o) as (keyof T)[];
  }

访问翻译：

import { translate } from './translate';
translate("Category.Home");

也可以将翻译对象存储在不同的文件中，编写动态更改语言的函数等...

Lit-translate 显示代码或密钥而不是翻译

Lit-translate shows code or key instead of translation

javascript

typescript

translate