错误类型错误：无法读取未定义的属性“即时”，ngx-translate 角度打字稿答案

【问题标题】：ERROR TypeError: Cannot read property 'instant' of undefined, ngx-translate angular typescript错误类型错误：无法读取未定义的属性“即时”，ngx-translate 角度打字稿
【发布时间】：2020-08-02 11:22:09
【问题描述】：

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

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');
    ...

  }
}

我还必须在 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));
  }
};

【问题讨论】：

你好，你能告诉我们你如何实例化 ChartAdapter 吗？似乎您在实例化过程中忘记传递 TranslateService，从而导致 translate 属性未定义（console.log（this.translate））
我编辑了我的问题@MaieonBrix，你能告诉我你在等什么吗？
你能告诉我 RiskChartAdapter 吗？根据您的代码，在实例化期间需要为 chartAdapter 提供 translateService。
目前我只是在使用 GaugeChartAdapter，对不起，我没有使用 RiskChartAdapter，但它是同一个文件：导出类 RiskChartAdapter 使用您可以在下面看到的构造函数实现 ChartAdapter
您好@MaieonBrix 我找到了解决方案，感谢您的 cmets 并发布了解决方案。谢谢

标签： javascript angular typescript translation angular-i18n

【解决方案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 是未定义的，因为它不在角度范围内，而是通过在调用工厂的组件中声明它是解决方案。

【讨论】：