Frappe Gantt 集成 angular 5

Question

我正在尝试将 Frappe Gantt 库与 Angular 5 集成。这是官方文档 https://frappe.io/gantt 但是我无法找到出路，因为打字稿会在它说的组件中抛出错误'不能将 'new' 与类型缺少调用或构造签名的表达式一起使用。'，当我执行时：

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

现在 frappe.min.js 已经导入我的 index.html 但我需要将新的甘特图对象分配给 frappeGantt。有解决办法吗？

Answer 1

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

需要在frappeGantt 后面添加一个默认关键字。这是因为包默认导出 class.

Answer 2

我设法在 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

Frappe Gantt 集成 angular 5

Frappe Gantt integration with angular 5

angular

gantt-chart