ERROR TypeError: Cannot read property 'instant' of undefined, ngx-translate angular typescript

Question

今天，我正尝试在 ts 文件中实现翻译服务，就像我的应用程序中的任何地方一样，首先要有这个 class :

export class GaugeChartAdapter<T = any> extends ChartAdapter<T> {

  constructor(protected translate: TranslateService) {
    super(translate);
  }

  public process() {
  ...
   options.series = options.series.map(elem => {
      if (lang === 'fr') {
        switch (elem.name) {
          case 'Institution':
            elem.name = this.translate.instant('COMPANY');
    ...

  }
}

我还必须在 class ChartAdapter 中实施，否则我会收到此错误：

    Type 'typeof GaugeChartAdapter' is not assignable to type 'new () => ChartAdapter<any>'

所以我这样做了:

export abstract class ChartAdapter<T> {
  constructor(protected translate: TranslateService) {
  }

  abstract process(...): any;
}

我的问题是在导航器中我有：

core.js:4098 ERROR TypeError: Cannot read property 'instant' of undefined

感谢您的帮助。

编辑

创建我的图表工厂：

export const graphsOptions: { [name: string]: any } = {
  'gauge': GAUGE_OPTIONS,//comming from a class
  //others graph..
};

export const graphsAdapters: { [name: string]: new () => ChartAdapter<any> } = {
  'gauge': GaugeChartAdapter,
  //others graph..
};

export class ChartCreator {
  public static createChart(key: string, element: HTMLElement, chartParams, callback?: any) {
    graphsOptions[key]['lang'] = chartParams.lang;
    graphsOptions[key]['title'] = chartParams.title;

    if (chartParams.colors && key === 'pie') {
      graphsOptions[key]['plotOptions']['pie']['colors'] = chartParams.colors;
    }
    const adapter = new graphsAdapters[key];
    return chart(element, adapter.process(graphsOptions[key], chartParams.data), callback);
  }

  public static createGauge(key: string, element: HTMLElement, data: any, total: number, lang: string, callback?: any) {
    const adapter = new graphsAdapters[key];
    return chart(element, adapter.process(graphsOptions[key], data, total, lang), callback);
  }

  public static createMap(key: string, data: any) {
    data[0][0] = data[0][0].toLowerCase();
    const adapter = new graphsAdapters[key];
    return new MapChart(adapter.process(graphsOptions[key], data));
  }
};

Answer 1

所以我找到了答案，感谢@MaieonBrix，

我的 ts 文件实际上不是 angular 所以我通过组件中的实例化传递了一个参数：


//TS COMPONENT
  constructor(public translate: TranslateService) {
  }

  private renderGraph(): void {
    this.chart = ChartCreator.createGauge('gauge', this.chartTarget.nativeElement, this.chartData,
      this.total, this.lang, this.showInitValue,  this.translate);
  }

//Factory
  public static createGauge(key: string, element: HTMLElement, data: any, total: number, lang: string, callback?: any,  translateService?) {
    const adapter = new graphsAdapters[key];
    return chart(element, adapter.process(graphsOptions[key], data, total, lang, translateService), callback);
  }

等...

所以 translate 是未定义的，因为它不在 angular 范围内，但是通过在调用工厂的组件中声明它是解决方案。

ERROR TypeError: Cannot read property 'instant' of undefined, ngx-translate angular typescript

ERROR TypeError: Cannot read property 'instant' of undefined, ngx-translate angular typescript

javascript

translation

typescript

angular-i18n

angular