Javascript 使用ember intl异步加载翻译

我正在尝试实现翻译的异步获取。我将

publicOnly

设置为

true

，如下所示：

跳过了设置

区域设置

键的步骤，因为翻译存储在

/translations

文件夹中

接下来，我应该修改

beforeModel

hook以异步获取翻译，这就是文档非常模糊的地方：

// app/routes/application.js
export default Ember.Route.extend({
  intl: Ember.inject.service(),
  async beforeModel() {
    let translations = await fetch('/api/translations.json');
    this.get('intl').addTranslations('en-us', translations);
    this.get('intl').setLocale('en-us');
  }
});

这些线路应该如何工作：

let translations = await fetch('/api/translations.json');
this.get('intl').addTranslations('en-us', translations);

在运行时，

dist

文件夹中没有

translations.json

文件。我只有

dist/translations/en-us.json

用于我唯一的翻译，不知道如何让它工作

缺少

addTranslations

方法的文档

---

非常感谢您的帮助。

这是我在进行异步翻译时使用的（随着应用程序的增长，我可能会将其带回来）

这在

services/intl.ts

import IntlService from 'ember-intl/services/intl';
import fetch from 'fetch';

import config from 'emberclear/config/environment';

export default class EmberClearIntl extends IntlService {
  async loadTranslations(locale: string) {
    let response = await fetch(`${config.hostUrl}/translations/${locale}.json`);
    let translations = await response.json();

    this.addTranslations(locale, translations);
  }

  lookup(key: string, localeName: string, options: any = {}) {
    const localeNames = this.localeWithDefault(localeName);
    const translation = this._adapter.lookup(localeNames, key);

    if (!options.resilient && translation === undefined) {
      const missingMessage = this._owner.resolveRegistration('util:intl/missing-message');

      return missingMessage.call(this, key, [localeNames]);
    }

    return translation;
  }
};

我相信它的灵感来自于ember intl存储库中的一个github问题，我对它进行了修改，以适应我的设置。（比如，config.hostUrl之类的东西——目前这只是设置为my domain，但是如果您的站点没有部署在域的根目录下，它可能会很方便）

我的应用程序路径中的用法：

import Route from '@ember/routing/route';
import { service } from '@ember-decorators/service';

import EmberClearIntl from 'emberclear/services/intl';

export default class ApplicationRoute extends Route {
  @service intl!: EmberClearIntl;

  async beforeModel() {
    const locale = 'en-us';

    await this.intl.loadTranslations(locale);

    this.intl.setLocale(locale);
  }
}

---

我还没有弄明白的是，如何用渐进式web应用程序最好地管理异步翻译。在我的应用程序的当前版本中，我删除了异步行为，只将翻译文件（只有一个）与我的应用程序捆绑在一起。

文档不清晰是对的-响应对象不是JSON本身。更改获取和添加translations.json（）的路径，而不仅仅是转换：

// app/routes/application.js
export default Ember.Route.extend({
  intl: service(),
  async beforeModel() {
    let translations = await fetch('/translations/en-us.json');
    this.intl.addTranslations('en-us', translations.json());
    this.intl.setLocale('en-us');
  }
});

---

嘿，谢谢分享！遗憾的是，对于文档中的异步翻译没有明确的解释。我认为这应该是最常见的使用。为什么会有人想把所有的翻译（我有10+）都放在应用程序包里，使它变得臃肿。不管怎样，我稍后会再讨论这个问题。是的，如果你最终找到了一个你喜欢的模式，也许值得向余烬国际回购提交一些文档的PR？很好。我认为在ember intl上缺少清晰的文档仍然是由于使用了ember-i18n（大部分）。灰烬-i18n正在走向毁灭之路。

// app/routes/application.js
export default Ember.Route.extend({
  intl: service(),
  async beforeModel() {
    let translations = await fetch('/translations/en-us.json');
    this.intl.addTranslations('en-us', translations.json());
    this.intl.setLocale('en-us');
  }
});