Frappe-Gantt与angular 5的集成

Question

我正在尝试将Frappe Gantt库与Angular 5集成。这是官方文件https://frappe.io/gantt但是，我无法找到解决方法，因为typescript在组件中抛出了一个错误，它说“不能对类型缺少调用或构造签名的表达式使用‘new’。”，当我执行时：

frappeGantt = new Gantt("#gantt", this.tasks);

现在是frappe。min.js已经导入到我的索引中。html，但我需要将新的甘特图对象分配给frappeGantt。有办法吗？

Answer 1

我在Angular 10中解决了这个问题，也许对你有用：

即使模块在默认情况下不可导出，也需要设置允许默认导入的标志。

我的组件如下所示：

import Gantt from 'frappe-gantt';
import {Component, ViewChild, ElementRef, OnInit} from '@ angular / core';


@Component ({
  selector: 'myGantt',
  templateUrl: './gantt.component.html',
  styleUrls: ['./gantt.component.scss'],
})
export class GanttComponent implements OnInit {
  @ViewChild ('gantt') ganttEl: ElementRef;

  gantt;
  tasks = [
    {
      id: 'Task 1',
      name: 'Redesign website',
      start: '2016-12-28',
      end: '2016-12-31',
      progress: 20,
      dependencies: 'Task 2, Task 3',
    },
  ];

  ngOnInit () {
    this.gantt = new Gantt ('# gantt', this.tasks);
  }
}

该标志将添加到tsconfig。json文件：“allowSyntheticDefaultImports”：true

Answer 2

this.frappeGanttChart = new frappeGantt.default("#ganttChart", this.tasks, {});

需要在frappeGantt之后添加默认关键字。这是因为包导出默认类。