使用 i18n 进行 Aurelia 验证？

Question

是否有人通过 Aurelia Validation 与 i18n 插件一起处理多语言错误消息？当我添加来自 Aurelia 文档 http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/12 的代码时，我的应用程序甚至无法启动。

这是我的 ma​​in.js：

import environment from './environment';
import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';
import {ValidationMessageProvider} from 'aurelia-validation';

//Configure Bluebird Promises.
//Note: You may want to use environment-specific configuration.
Promise.config({
  warnings: {
    wForgottenReturn: false
  }
});

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-validation');

  aurelia.use.plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
        backend: {                                  
          loadPath: '/locales/{{lng}}/{{ns}}.json',
        },
        lng : 'en',
        ns: ['translation'],
        defaultNS: 'translation',
        attributes : ['t','i18n'],
        fallbackLng : 'en',
        debug : false
      });
    });

  // Straight from Aurelia Documentation
  const i18n = aurelia.container.get(i18n);
  ValidationMessageProvider.prototype.getMessage = function(key) {
    const translation = i18n.tr(`errorMessages.${key}`);
    return this.parser.parseMessage(translation);
  };

  // Straight from Aurelia Documentation
  ValidationMessageProvider.prototype.getDisplayName = function(propertyName) {
    return i18n.tr(propertyName);
  };

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}

我得到的错误是vendor-bundle.js:3394 Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?(…)

如果我删除标记为// Straight from Aurelia Documentation 的两个部分，它可以正常工作（但只能使用一种语言）。

如果您在我的代码中发现错误，请指出。或者，如果您有一个使用 aurelia-validation 和 aurelia-i18n 的工作示例，请传递一个链接。谢谢！

Answer 1

也遇到了这个问题。看来这条线

// Straight from Aurelia Documentation
const i18n = aurelia.container.get(i18n);

正在获取（或更可能创建）i18n 的不同实例，而不是

aurelia.use.plugin('aurelia-i18n', (instance) =>

我通过直接从aurelia.use.plugin() 获取i18n 实例来解决此问题，如下所示（这是打字稿，但同样的原则适用于纯 js）：

let i18n:I18N = null;
aurelia.use.plugin('aurelia-i18n', (instance:I18N) => {
    i18n = instance;
    //rest of plugin code here
}

Answer 2

改用导入的 I18N：

const i18n = aurelia.container.get(I18N);

但实际上，i18n 之后似乎停止工作。我的解决方案是在第一次注入时更新第一页（app.js）中的 i18n 单例实例：

  constructor(i18n) {
    this.i18n = i18n;
    this.initAureliaSingletons();
  }

  /**
   * Some configurations breaks in 'main.js'
   * singletons can be configure here
   * @return {void}
   */
  initAureliaSingletons() {
    const i18n = this.i18n;
    ValidationMessageProvider.prototype.getMessage = function(key) {
      const translation = i18n.tr(`validation-${key}`);
      return this.parser.parseMessage(translation);
    };
  }

Answer 3

我把它放在我的主服务器上，它就可以工作了。我认为诀窍是使用在插件初始化中初始化的变量：

  var i18n;
  aurelia.use.plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(Backend.with(aurelia.loader)).use(LngDetector);
      i18n = instance;

(...)

      aurelia.use.plugin('aurelia-validation');

      var standardGetMessage = ValidationMessageProvider.prototype.getMessage;
      ValidationMessageProvider.prototype.getMessage = function (key) {
          if (i18n.i18next.exists(key)) {
              const translation = i18n.tr(key);
               return this.parser.parse(translation);
          } else {
              return standardGetMessage(key);
          }
      };

      ValidationMessageProvider.prototype.getDisplayName = function (propertyName, displayName) {
          if (displayName !== null && displayName !== undefined) {
              return displayName;
          }
          return i18n.tr(propertyName);
      };