Question

按照DHTMLX给出的教程进行所有步骤。但是在初始化甘特图时出错：

import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import "dhtmlx-gantt";


@Component({
    selector: "gantt",
    styles: [
        `
        :host{
            display: block;
            height: 600px;
            position: relative;
            width: 100%;
        }
    `],
    template: "<div #gantt_here style='width: 100%; height: 100%;'></div>",
})
export class GanttComponent implements OnInit {
    @ViewChild("gantt_here") ganttContainer: ElementRef;

    ngOnInit(){
        gantt.init(this.ganttContainer.nativeElement);
    }
}

这是一个错误

src / app / views / tasks / gantt.component.ts（19,3）中的
ERROR：错误TS2304：找不到名称“甘特”。

我与下载的项目之间没有发现任何差异，该项目运行时没有任何错误。链接到git https://github.com/DHTMLX/angular2-gantt-demo

Answer 1

我的试用版解决方案如下：

请勿按照我的建议在.css中添加.js和index.html： https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html#addingprofessionaleditionintoproject。而是将它们添加到angular.json中。
窥探package.json的免费npm可安装版本的dhtmlx-gantt文件中
将试用版的package.json更改为1）删除对index.js的引用，以及2）添加类型。我的看起来像这样：

    {
      "name": "dhtmlx-gantt-samples",
      "version": "1.0.0",
      "description": "Simple backend and REST api for dhtmlx gantt samples",
      "main": "codebase/dhtmlxgantt.js",
      "types": "codebase/dhtmlxgantt.d.ts",
      "author": "DHTMLX",
      "license": "DHTMLX Evaluation License",
      "dependencies": {
        "body-parser": "^1.18.3",
        "express": "^4.16.4",
        "striptags": "^3.1.1"
      }
    }

Answer 2

在我正在从事的项目中使用此软件包时，我确实不得不对此做一些不寻常的事情

我在导入中添加了这一行

import {} from '@types/dhtmlxgantt';

我认为，当他们开发此图表时，他们并不完全了解类型如何与TypeScript一起使用以及如何正确打包它们。

在使用此软件包时，我确实发现this blog post很有帮助。我最终放弃了使用此程序包并构建自己的自定义甘特图，因为他们的图表没有我们项目所需的功能。希望这会有所帮助！

Answer 3

在tsconfig.app.json文件中添加三行代码可以解决所有问题

"types": [
    "dhtmlxgantt"
]

带有Angular 2框架的DHTMLX甘特图用法出现错误

3 个答案: