如何包含 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 提供的 link 是正确的，我想补充两点。

您应该将 styles.scss 文件引用放在 .angular-cli.json 文件中 styles 数组的最后。如果您在 ag-grid 样式之前保留 styles.scss，则您要覆盖的 ag-grid 样式将被覆盖。
在 <ag-grid-angular> 元素上添加 class="ag-theme-balhom" 或 class="ag-theme-fresh"。 总之，你想应用哪个主题都可以。

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

How to include ag-grid styles for Angular 5?

ag-grid

ag-grid-ng2