Wijmo Angular 2 组件在模板标记中使用一致的命名规则。组件使用的 HTML 元素以及属性名称可以容易地使用以下简单规则从组件类以及成员名称推断:
- 表示一个 Wijmo 组件的 HTML 元素名称由小写字母+短线语法指定。 例如,WjInputNumber 组件应当拼写为 wj-input-number:
<wj-input-number [(value)]="amount"></wj-input-number>
- Wijmo 属性指令使用其类名的驼峰形式,也就是说,这是一个首字母小写的类名称。例如,WjFlexGridCellTemplate 指令使用 wjFlexGridCellTemplate 属性进行定义:
<template wjFlexGridCellTemplate [cellType]="'Cell'"></template>
- 表示 Wijmo 组件属性和事件的 attribute 的名称必须和 组件类接口上的属性以及事件名称精确吻合。 在单向绑定时,属性名称必须括在一对方括号中(例如 [isReadOnly]),而在双向绑定时,属性名还需要在方括号中间再括上一对圆括号(例如 [(value)])。 事件名称必须括在一对圆括号中(例如 (valueChanged))。比方说以下代码片:
<wj-input-number [(value)]="amount" // 到组件属性的双向绑定 [format]="'n0'" // 到字符串的单向绑定 [isReadOnly]="true" // 到布尔值的单向绑定 (valueChanged)="valueChanged($event)"> // 事件绑定 </wj-input-number>
请注意绑定表达式所计算出来的结果必须和被赋值的属性本身所定义的值类型一致。 在以上示例中,字符串类型的format属性通过一个括在单引号中的'n0'赋值,该表达式表示一个字符串字面值。如果我们略去单引号,仅仅指定为 n0,则这样 的一个表达式将被作为一个属性名处理。相似地,isReadOnly 布尔型属性绑定到 true,请注意这里的字母没有添加单引号,因为 true 是一个布尔类型的常量,而 通过单引号括起来的 'true' 则表示一个字符串的字面值。
事件绑定详细信息
Wijmo 事件处理定义为具有两个参数的函数:事件的触发源sender 以及事件参数。 Angular 2 EventEmitter 实现允许从事件触发源仅传递一个参数至事件订阅者,该参数通过模板标记上的本地变量$event 的一个属性值进行访问。 Wijmo 事件将在该参数中传递一个事件参数。例如:
<wj-flex-grid [itemsSource]="data" (deletingRow)="beforeDelete($event)"> // 这里,$event 包含一个 CellRangeEventArgs 类型的对象 </wj-flex-grid>
如果您希望额外地在事件处理中获取一个事件触发源 sender,就像您在 TypeScript/JavaScript 代码中订阅 Wijmo 控件事件那样,您需要做的就是添加一个本地的模板变量至组件,并 将其和事件参数一起传递给组件:
<wj-flex-grid #flex // 'flex' 本地变量引用了 grid 组件的实例 [itemsSource]="data" (deletingRow)="beforeDelete(flex, $event)"> // 传递触发源 ('flex') 以及事件参数 ($event) 至事件处理函数 </wj-flex-grid>
更多资源:
Wijmo中文官网:/developer/wijmojs
Wijmo5产品文档:/developer/wijmojscore
Wijmo5在线示例:/developer/wijmojscore
如果依然有问题,可以到我们的官方产品论坛发帖咨询:
Wijmo5问题响应通道:http://gcdn.grapecity.com.cn/forum.php?mod=forumdisplay&fid=173