如何在Aurelia上的自定义属性中使用i18n

Question

我在Aurelia中有以下自定义属性：

import { fireEvent } from '_utils/events'
import { autoinject, customAttribute, inject } from 'aurelia-framework'
import $ from 'jquery'
import { I18N } from 'aurelia-i18n'
import 'Modernizr'
import 'pickadate/lib/compressed/picker'
import 'pickadate/lib/compressed/picker.date'
@customAttribute('datepicker')
@inject(Element)
@autoinject
export class DatePicker {
  // public i18N: I18N
  private usePickADate: boolean
  constructor (private element: Element, private i18n: I18N) {
    this.i18n = i18n
    this.usePickADate = !Modernizr.inputtypes.date
    $(this.element).pickadate({
      weekdaysShort: ['Ss', 'Mm', 'Tt', 'Ww', 'Th', 'Ff', 'Ss'],
      showMonthsShort: true,
      format: i18n.tr('general.date-format')
    })
  }
  public attached () {
    if (this.usePickADate) {
      $(this.element).pickadate()
        .on('change', (e: any) => {
          fireEvent(e.target, 'input')
        })
    }
  }
  public detached () {
    if (this.usePickADate) {
      $(this.element).pickadate('picker')
        .off('change')
        .stop()
    }
  }
}

在这里，我无法使用 i18n 进行翻译和本地化。我收到此错误：

内部错误： 消息： 无法读取未定义的属性"tr"

问题出在哪里？我该如何解决它？

Answer 1

您可以在Aurelia中以两种方式注入依赖项，通过使用@autoinject()或使用@inject()。

• @autoinject()自动查看任何构造函数参数，并自动注入已导入的任何依赖项。

• @inject()要求您特别提及您希望注入到类中的任何依赖项。

使用@autoinject()的简单情况是：

import { I18N } from "aurelia-i18n";
import { autoinject } from "aurelia-framework";
@autoinject()
export class DatePicker {
  constructor (private element: Element, private i18n: I18N) { }
}

如果您出于任何原因确实希望使用 @inject() 而不是 @autoinject()，请务必注入所有依赖项，如下所示：

import { I18N } from "aurelia-i18n";
import { inject } from "aurelia-framework";
@inject(Element, I18N)
export class DatePicker {
  constructor (private element: Element, private i18n: I18N) { }
}

您在问题中同时使用两者，这似乎将事情搞砸了。

Answer 2

我解决了它，我删除了@inject(Element)：

import { autoinject, customAttribute } from 'aurelia-framework'
....
@customAttribute('datepicker')
@autoinject
export class DatePicker {
....