如何为Angular 5包含ag-grid样式？

Question

我正在使用带有ag-grid 17.x的Angular 5，我只是想做一个简单的“hello world”类型示例，但是无法正确显示网格。我的模板中有以下HTML：

<div style="width: 800px; height: 500px" class="ag-theme-balham">
  <ag-grid-angular
                   [rowData]="rowData"
                   [columnDefs]="columnDefs">
  </ag-grid-angular>
</div>

...而且我没有得到任何错误，但是它只是渲染为一个混乱的文本列而不是网格。

无论如何，我在开发工具中注意到网格指向的样式不存在，所以我将它们导入.angular-cli.json：

  "styles": [
    "scss/styles.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balhom.css"
  ],

......这有效，但解决方案对我来说似乎不对。我试图在我的一个.scss文件中导入它们：

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';

...但是得到了一堆参考错误（找不到图标等）。

我的问题是如何将ag-grid样式和主题导入到Angular应用程序中？我在文档中挖了一下，但似乎无法找到我偶然发现的解决方案，所以假设它是错的......但找不到任何有效的方法。感谢您的帮助！

Answer 1

@koolhuman提供的链接是正确的，我想在其上添加两点。

1. 您应该将styles.scss文件引用保留在styles文件的.angular-cli.json数组中的最后一个。如果您在styles.scss样式之前保留ag-grid，则会覆盖您要覆盖的ag网格样式。

2. 在class="ag-theme-balhom"元素上添加class="ag-theme-fresh"或<ag-grid-angular>。 简而言之，无论您想要应用哪种主题。