Question

我正在尝试实现翻译的异步获取。我将docs设置为publicOnly到true：

// config/ember-intl.js
module.exports = function() {
  return {
    publicOnly: true
  }
};

因为翻译存储在locales文件夹中，所以跳过了设置/translations键的步骤。

接下来，我应该修改beforeModel钩子以异步获取翻译，这就是文档非常模糊的地方：

// 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);

在运行时，translations.json文件夹中的任何地方都没有dist文件。 dist/translations/en-us.json仅用于我的一次翻译，却不知道如何使它生效。

Service API缺少addTranslations方法的文档。

不胜感激。

Answer 1

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

这是在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之类的东西-目前仅设置为我的域，但是如果您的网站未部署在域的根目录下，可能会很方便。）

在我的申请路线中的用法：

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应用程序最佳地管理异步翻译。在当前版本的应用程序中，我删除了异步行为，仅将翻译文件（仅一个）与我的应用程序捆绑在一起。

Answer 2

您说对文档并不清楚是正确的-响应对象不是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');
  }
});

用ember-intl异步加载翻译

2 个答案: