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

【问题标题】：How to include ag-grid styles for Angular 5?如何包含 Angular 5 的 ag-grid 样式？
【发布时间】：2018-09-14 05:28:08
【问题描述】：

我将 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 应用程序？我在文档中四处寻找，但似乎找不到我偶然发现的解决方案，所以假设它是错误的......但也找不到任何有效的方法。感谢您的帮助！

【问题讨论】：

请参考本文档-ag-grid.com/ag-grid-angular-angularcli，您需要在angular-cli.json文件中添加ag-grid的样式表
谢谢！不知何故错过了那个文件。
你也打错了balhom，应该是balham

标签： ag-grid ag-grid-ng2

【解决方案1】：

@koolhuman 提供的链接是正确的，我想在此基础上补充两点。

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

【讨论】：