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

时间:2017-11-08 11:53:37

标签: typescript localization aurelia i18next custom-attribute

我在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'未定义的

有什么问题?我该如何解决?

2 个答案:

答案 0 :(得分:1)

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

  • @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) { }

}

你在问题​​中使用了两者,这似乎搞得一团糟。

答案 1 :(得分:0)

我解决了,我删除了$( "#search-btn" ).click(function() { $("#domain-field").data("uiAutocomplete").search($("#domain-field").val()); });

@inject(Element)