在阅读本文前,可以先了解Angular 2 快速入门 向应用程序添加对 Wijmo 5 的引用

说明
  • 基于Angular 2 2.0.0 版本构建

Wijmo组件允许您在Angular 2 模板标记语言中使用 Wijmo 控件。 针对 TypeScript 的类继承特性,Angular 2 版本的 Wijmo 组件 “扩展”自他们所表示的control类。 这表示,当您获取了对某个 Angular 2 组件的引用时,该引用实际指向的实例是一个 Wijmo control,同时将包括其全部的属性,事件及方法,以及一个 Angular 2 组件。 一个 Wijmo 组件扩展自 control 类,并添加了一些必要的功能,使其能够在 Angular 2 模板标记语言中使用。该组件完全支持单向和双向的数据绑定以及事件绑定机制。 这种集成是无缝的,因为所有的使用者, Wijmo 控件, Wijmo Angular 2 组件以及 Angular 2 自身,都是通过 TypeScript 语言进行书写。

Wijmo Angular 2 组件在一个单独的 wijmo.angular2.js 文件中提供,该文件包含多个模块,同时我们还提供了多个 TypeScript 定义文件(.d.ts),这些文件将为 TypeScript 编译器以及 Visual Studio(或者其他可能的IDE)的智能感知提供各个模块的API描述。

模块 wijmo/wijmo.angular2.core

文件 wijmo.angular2.js

包含 wijmo 模块的 Angular 2 组件。

wijmo.angular2.core 是一个外部的 TypeScript 模块,可以通过其环境模块名称导入到您的代码中。例如:

import * as wjCore from 'wijmo/wijmo.angular2.core';
 
@Component({
    directives: [wjCore.WjTooltip],
    template: '<span [wjTooltip]="'Greeting'">Hello</span>',
    selector: 'my-cmp',
})
export class MyCmp {
}

模块 wijmo/wijmo.angular2.input

文件 wijmo.angular2.js

包含 wijmo.input 模块的 Angular 2 组件。

wijmo.angular2.input 是一个外部的 TypeScript 模块,可以通过其环境模块名称导入到您的代码中。例如:

import * as wjInput from 'wijmo/wijmo.angular2.input';
 
@Component({
    directives: [wjInput.WjInputNumber],
    template: '<wj-input-number [(value)]="amount"></wj-input-number>',
    selector: 'my-cmp',
})
export class MyCmp {
    amount = 0;
}

模块 wijmo/wijmo.angular2.grid

文件 wijmo.angular2.js

包含 wijmo.grid 模块的 Angular 2 组件。

wijmo.angular2.grid 是一个外部的 TypeScript 模块,可以通过其环境模块名称导入到您的代码中。例如:

import * as wjGrid from 'wijmo/wijmo.angular2.grid';
 
@Component({
    directives: [wjGrid.WjFlexGrid],
    template: '<wj-flex-grid [itemsSource]="data"></wj-flex-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

 

模块 wijmo/wijmo.angular2.chart

文件 wijmo.angular2.js

包含 wijmo.chart 模块的 Angular 2 组件。

wijmo.angular2.chart 是一个外部的 TypeScript 模块,可以通过其环境模块名称导入到您的代码中。例如:

import * as wjChart from 'wijmo/wijmo.angular2.chart';
 
@Component({
    directives: [wjChart.WjFlexChart, wjChart.WjFlexChartSeries],
    template: `
      <wj-flex-chart [itemsSource]="data" [bindingX]="'x'">
          <wj-flex-chart-series [binding]="'y'"></wj-flex-chart-series>
      </wj-flex-chart>`,
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

 

模块 wijmo/wijmo.angular2.gauge

文件 wijmo.angular2.js

包含 wijmo.gauge 模块的 Angular 2 组件。

wijmo.angular2.gauge 是一个外部的 TypeScript 模块,可以通过其环境模块名称导入到您的代码中。例如:

import * as wjGauge from 'wijmo/wijmo.angular2.gauge';
 
@Component({
    directives: [wjGauge.WjLinearGauge],
    template: '<wj-linear-gauge [(value)]="amount" [isReadOnly]="false"></wj-linear-gauge>',
    selector: 'my-cmp',
})
export class MyCmp {
    amount = 0;
}

 

模块 wijmo/wijmo.angular2.olap

文件 wijmo.angular2.js

包含 wijmo.olap 模块的 Angular 2 组件。

wijmo.angular2.olap 是一个外部的 TypeScript 模块,可以通过其环境模块名称导入到您的代码中。例如:

import * as wjOlap from 'wijmo/wijmo.angular2.olap';
 
@Component({
    directives: [wjOlap.WjPivotGrid],
    template: '<wj-pivot-grid [itemsSource]="data"></wj-pivot-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

 

资源

  • 打开 Angular 2 的中文网,来阅读它的快速起步

  • Wijmo中文官网

  • 下载wijmoenterprise包,并打开:
    /wijmoenterprise/Samples/TS/Angular2/FlexGridIntro/FlexGridIntro

  • 如果你没有nodejs 环境,请先安装nodejs 环境。

  • Wijmo Angular2的参考示例路径:\C1Wijmo-Eval_5.20163.234\Samples\JS\Angular2