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

Question

我将 Angular 5 与 ag-grid 17.x 一起使用，我只是尝试做一个简单的“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 提供的链接是正确的，我想在此之上添加两点。

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

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