使用Angular封装甘特图组件

背景：

Debian 10 + Angular 11

由于官方提供的demo是基于Angular 7的，已经过时了，其他能查到的资料大多是基于Vue的，因此，使用Angular 11 自己总结了一套方法，最终封装的甘特图组件效果如下：

 

第一步：

npm install dhtmlx-gantt --save

 

第二步：

ng g c gantt

编辑 gantt.component.ts，添加对甘特图的支持，代码如下：

需要注意的是，要在ngAfterViewInit里初始化dhtmlx的甘特图，而不是在ngOnInit

import {Component, OnInit, ElementRef, ViewChild, ViewEncapsulation, AfterViewInit} from '@angular/core';

import {gantt} from 'dhtmlx-gantt';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-gantt',
  templateUrl: './gantt.component.html',
  styleUrls: ['./gantt.component.less']
})
export class GanttComponent implements OnInit, AfterViewInit {

  @ViewChild('gantt_here') ganttContainer: ElementRef;

  constructor() { }

  ngOnInit(): void {
    // gantt.init(this.ganttContainer.nativeElement); // 不要在这里初始化甘特图，会报undefined
  }

  ngAfterViewInit(): void {
    gantt.init(this.ganttContainer.nativeElement);
  }

}

 

编辑 gantt.component.less，添加甘特图的样式，代码如下：

.gantt-chart{
  position: relative;
  width: 100%;
  height: 600px;
}

 

编辑 gantt.component.html，添加甘特图的html，代码如下：

<div #ganttContainer class='gantt-chart'></div>

 

只需要这两步就完成了基于dhtmlx的甘特图组件的封装，但是现在我们自己封装的甘特图组件，还不能正常工作，还需要进行下列操作：

 

第三步：引入dhtmlx的样式

编辑 angular.json，在styles标签下，添加 [ "node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css"]

 

最后，通过Angular-cli重启项目，重启项目，重启项目，重要的事情说三遍！！！

重启项目以后，是不是可以看到Angular封装的甘特图组件的效果了？

 

别急着开心，这可是万里长征第一步啊...