背景：

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封裝的甘特圖元件是不是顯示正常了？

別急著開心，這可只是萬里長征第一步啊...