<html> <head> <meta charset="UTF-8"> <title>使用 Angular 2 来创建FlexGrid控件</title> <!--angular 2 模块--> <!--用于填充旧版浏览器--> <script src="https://www.jb51.net/node_modules/core-js/client/shim.min.js"></script> <script src="https://www.jb51.net/node_modules/zone.js/dist/zone.js"></script> <script src="https://www.jb51.net/node_modules/reflect-metadata/Reflect.js"></script> <script src="https://www.jb51.net/node_modules/systemjs/dist/system.src.js"></script> <!--systemjs 配置--> <script src="https://www.jb51.net/systemjs.config.js"></script> <!--wijmo 模块--> <script src="https://www.jb51.net/scripts/vendor/wijmo.min.js"></script> <script src="https://www.jb51.net/scripts/vendor/wijmo.grid.min.js"></script> <link href="https://www.jb51.net/styles/wijmo.min.css"> <script src="https://www.jb51.net/scripts/vendor/wijmo.angular2.min.js"></script> <!--mine--> <script> System.import('./app/main').catch(function(err){ console.error(err); }); </script> </head> <body> <!--申明根组件--> <app-cmp> Loading </app-cmp> </body> </html>
在HTML宿主页面中，除了Angular 2中必须的组件，还需要引入Wijmo脚本。
2、编写数据服务
'use strict' import { Injectable } from '@angular/core'; @Injectable() export class DataService { getData(count: number): wijmo.collections.ObservableArray { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = new wijmo.collections.ObservableArray(); for (var i = 0; i < count; i++) { data.push({ id: i, country: countries[i % countries.length], date: new Date(2014, i % 12, i % 28), amount: Math.random() * 10000, active: i % 4 == 0 }); } return data; } }
3、编写根组件
现在我们编写应用的第一个组件：根组件 app.component ,也是这个程序唯一的组件。在这个组件中，需要引入两个元标记：Component, Inject。还需要注入定义的数据服务data.Service。
app.component.ts：
import { Component, Inject } from '@angular/core'; import { DataService } from '../services/data.service'; @Component ({ selector:'app-cmp', templateUrl:'app/components/app.component.html', }) export class AppComponent{ protected dataSvc:DataService; data: wijmo.collections.CollectionView; constructor(@Inject(DataService) dataSvc:DataService){ this.dataSvc = dataSvc; this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(50)); } }
app.component.html：
<div> <h2> 展示如何在angular 2上使用 Wijmo的FlexGrid。 </h2> </div> <div> <wj-flex-grid [itemsSource]="data"> </wj-flex-grid> </div>
在这里仅仅需要引入wj-flex-grid标记，就可以创建FlexGrid控件。wj-flex-grid 组件是作为一个子组件存在，在app.module 模块中注入。itemsSource 绑定一个数据源，这个itemsSource是flexgrid已经封装完成的属性。
在Angular 2下使用FlexGrid的最大好处就是：Angular 2组件提供了使用标记语言来声明控件的能力。声明标记很好地遵循了MVVM设计模式，我们可以完全通过View（标记语言）来配置我们的组件。FlexGrid支持使用Angular 2标记语言来声明完整的API。你完全可以使用标记语言设置属性，附加事件，配置子组件。
4、编写根模块
在根模块中将组件注入，需要将引用的所有的组件和模块都要注入进来。
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from 'wijmo/wijmo.angular2.grid'; import { AppComponent } from './components/app.component'; import { DataService } from './services/data.service'; @NgModule({ imports: [ WjGridModule, BrowserModule], declarations: [AppComponent], providers:[DataService], bootstrap: [AppComponent], }) export class AppModule { }
5、引导程序
main.ts：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import {enableProdMode} from '@angular/core'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);
三、运行
在命令行执行 npm start，这时，程序会自动打开默认浏览器并渲染页面。