SpreadJS 在 Angular2 中支持哪些事件？

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能，适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

在上一篇文章中，咱们学习了SpreadJS 在 Angular2 中支持绑定的属性，今天咱们来介绍 SpreadJS 在 Angular2 中支持哪些事件。

首先 Angular2 绑定事件的方法是在 template 中使用"( )"设置绑定事件，而后在导出模块中编写事件触发的方法，像这样：

@Component({
    selector: 'my-app',
    template: 
      `<gc-spread-sheets (workbookInitialized)= "workbookInit($event)" >
    </gc-spread-sheets>`,
})

export class AppComponent { 
    workbookInit (args) {
            //do something    }
}

其中 $event 为 Angular2 的关键字，相似于 window.event，SpreadJS 对 $event 作了一些扩展，若是须要在事件中对 SpreadJS 相关的处理，那么能够传入 $event 来获取事件触发的默认参数，例如：

workbookInitialized 事件中传入 $event 参数后，在能够经过 args.spread 获取 spread 的实例对象。这里对workbookInitialized事件作一个说明，workbookInitialized中能够经过 args.spread 获取 spread 对象，经过 spread 对象理论上咱们能够在这里作任何 SpreadJS 功能的事情，这里的事情是不经过 Angular2 来进行处理的。这里能够作一些 Angular2 中不支持绑定的 SpreadJS 功能，例如：

Angular2 支持的 SpreadJS 属性中没有筛选功能，那么若是咱们要在 Angular2 的工程中实现一个列的筛选功能咱们应该怎么作呢？以上面的代码为例，咱们能够在 workbookInit 方法中使用：

var spread = args.spread;
var sheet = spread.getActiveSheet();
var columncount = sheet.getColumnCount();
var range = new GC.Spread.Sheets.Range(-1, 0, -1, columncount );
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
sheet.rowFilter(rowFilter);

这样就完成了在列上面增长绑定的功能。

详细的事件说明，请参考博客。

须要注意的是，全部的事件都是绑定在 gc-spread-sheets 标签上的，绑定在其余标签上是无效的。

以上就是如何用 Angular2 构建 SpreadJS 项目的所有内容，相信你们经过第一篇的基础搭建，再参考第二遍的属性与第三篇的事件文档后，已经能够轻松的在 Angular2 的项目中使用 SpreadJS 了。

SpreadJS V10.2 版本即将发布，更多更好的功能尽在新版本中，敬请期待！

登陆 SpreadJS 官网，了解更多。