如何为Angular 5包含农业网格样式？ [英] How to include ag-grid styles for Angular 5?

问题描述

我正在将Angular 5与ag-grid 17.x一起使用，并且只是尝试做一个简单的 hello world类型的示例，但无法使网格正确显示。我的模板中包含以下HTML：

I'm using Angular 5 with ag-grid 17.x and am just trying to do a simple, "hello world"-type example, but having trouble getting the grid to display appropriately. I have the following HTML in my template:

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

...而且我没有得到任何错误，但是它只是呈现了网格而不是网格

...and I don't get any errors, but instead of a grid, it's just rendered as one jumbled column of text.

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

Anyway, I noticed in dev tools that the styles that the grid was pointing to weren't there, so I imported them in the .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文件之一中：

...and this worked, but the solution doesn't seem right to me. I tried to import them in one of my .scss files:

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

...但是出现了很多参考错误（找不到图标等）。

...but got a bunch of reference errors (couldn't find icons, etc.).

我的问题是应如何将农业网格样式和主题导入Angular应用程序？我已经在文档中进行了深入研究，但是似乎找不到我偶然发现的解决方案，因此假设它是错误的...但是也找不到任何可行的解决方案。感谢您的帮助！

My question is how should ag-grid styles and themes be imported into an Angular application? I've dug around in the documentation, but can't seem to find the solution that I stumbled upon, so assume it's wrong...but can't find anything that works either. Thanks for any help!

推荐答案

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

The link @koolhuman has provided is correct, I would like to add two points on top of that.

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

1. You should keep your styles.scss file reference at the last in styles array in .angular-cli.json file. The ag-grid styles you want to override will be overridden if you keep styles.scss before ag-grid styles.

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

Add class="ag-theme-balhom" or class="ag-theme-fresh" on you <ag-grid-angular> element. In short, whichever theme you want to apply.

这篇关于如何为Angular 5包含农业网格样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！