使用 angular-cli 的 Ag-grid 和 Angular2答案

【问题标题】：Ag-grid and Angular2 using angular-cli使用 angular-cli 的 Ag-grid 和 Angular2
【发布时间】：2017-04-29 23:44:12
【问题描述】：

我正在尝试使用 angular2 运行 ag-grid，ag-grid 站点中的示例使用 SystemJS 作为构建器，而新的 angular-cli 使用 webpack。

下面我将介绍我的运行方式，但我没有使用 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);
  }

}

谢谢。

【问题讨论】：

我也在学习这些东西，据我了解，这与 Angular-Cli 如何使用不可扩展的 webpack 配置有关。现在有很多关于您无法添加除 angular2/material 之外的其他控件这一事实的抱怨。我有一种强烈的感觉，在 node_modules/angular-cli/tasks 文件夹中有一个文件可以为我们提供我们想要的，但我还没有找到它
我让网格显示，但它搞砸了。所有的列数据相互叠加显示，表格每半秒左右无限扩大，一点一点。这可能会导致我放弃 angular-cli 并使用 webpack 种子。这个库对我的项目非常重要。
有人想出解决方案吗？我使用 Angular 网站作为指导为新应用构建了几个模块，并决定上周将其带到 Angular-cli。 Ag-grid 在我的模块中大量使用。无论如何，最后一切正常，但遇到了与@KentJohnson 描述的相同的问题。渲染缓慢，数据加载一团糟。我很好奇是否有人有他们想要分享的解决方案（即使使用 Webpack 种子）？

标签： angular angular-cli ag-grid

【解决方案1】：

当为 Ag-Grid 使用 Angular-CLI 而不是使用ag-grid-ng2 时，我建议您使用ag-grid-angular。希望这些参考资料会有所帮助：

【讨论】：

欢迎来到 Stack Overflow！虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。