项目管理工具dhtmlxGantt甘特图入门教程（五）：甘特图实例特点

本文重点介绍使用Gantt Instance的主要功能。

点击获DhtmlxGantt官方正式版

让我们考虑最常见的情况-构建具有多个页面/选项卡/视图的应用程序。

以下方法适用于基于 Angular（或基于 React）的应用程序，并且仅在dhtmlxGantt的商业版、企业版或旗舰版中可用（在 GPL 或个人版中不可用）：

• 当您使用甘特图打开页面/选项卡/视图时，您需要创建一个新的甘特图实例；
• 当您切换到不同的页面/选项卡/视图时，您需要销毁甘特图实例。

自定义事件

当您使用甘特图加载页面时，您需要在添加事件之前手动将事件的ID保存到数组中：

const onTaskClick = gantt.attachEvent('onTaskClick', (id) => {
    gantt.message(`onTaskClick: Task ID: ${id}`);
    return true;
}, '');
eventIDs.push(onTaskClick);

当您切换到另一个页面时，您需要使用已保存到数组的ID手动分离事件：

eventIDs.forEach(event => gantt.detachEvent(event));
eventIDs = [];

数据处理器

你需要手动销毁dataProcessor：

dp.destructor();

请注意，您只需要销毁数据处理器，而不是甘特图。否则，在重新加载页面之前，您将无法使用甘特图。

<