首先 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 了。
本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/1944803,如需转载请自行联系原作者