Ag-grid和Angular2使用angular-cli

下面我将介绍我的运行方式,但我没有使用ag-grid-ng2.我不知道在angular-cli.json中引用ag-grid-ng2的位置.

我想逐步使用这样的东西：

我正在使用：

>节点：6.9.2
> NPM：4.0.5
>打字稿：2.1.4
> Angular CLI：1.0.0-beta.22-1
> Ag-Grid：7.0.2

我使用以下命令启动项目,并没有更改任何内容,除了下面将要描述的内容：

ng new MyProject
cd MyProject
npm install --save ag-grid
npm install --save ag-grid-ng2

然后我编辑了文件’angular-cli.json’：

"styles": [
  "../node_modules/ag-grid/dist/styles/ag-grid.css","../node_modules/ag-grid/dist/styles/theme-blue.css","styles.css"
],"scripts": [
  "../node_modules/ag-grid/dist/ag-grid.js"
],

文件：app.component.html

<h1>
  {{title}}
</h1>

<div  id="grid-test"
      style="height: 250px;" 
      class="ag-blue">
</div>

文件：app.component.ts

import { Component,OnInit } from '@angular/core';

import { Grid,GridOptions } from "ag-grid/main";

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'app works!';
  gridOptions: GridOptions;

  constructor() {   
  }

  ngOnInit() {

    this.gridOptions = <GridOptions>{};
    this.gridOptions.columnDefs = [];
    this.gridOptions.columnDefs.push({ headerName: 'name',field: 'name' });

    var el = document.querySelector('#grid-test');
    new Grid(<HTMLDivElement>el,this.gridOptions);

    let data: any[] = [];
    data.push({name: 'Name 1'});
    data.push({name: 'Name 2'});
    data.push({name: 'Name 3'});
    this.gridOptions.api.setRowData(data);
  }

}

谢谢.