Angular 自定义Ag网格头组

我需要自定义Ag网格中的标题组（角度）： 1） 使其中的文本居中（默认为左对齐）； 2） 使每个标题组的背景具有特定的颜色

如何做到这一点

我试着在那个班级的SCSS中这样做，但在视图上没有任何改变， 甚至当我将文件从SCSS重命名为CSS时

使用Angular6，Ag网格v.20，SCSS

请帮忙

蒂亚，

---

Oleg

为了在ag网格中居中标题组文本，只需使用

.ag标题组单元格标签

类上的

对齐内容

CSS属性即可

您可能需要在main styles.scs（与index.html、package.json等位于同一目录级别的）上设置此选项

同样，这也是您可以自定义标题组颜色的方式

.ag-header-group-cell-with-group {
    background-color: blue;
}

这是一份供你参考的报告。我已经对styles.css文件进行了更改

至于定制您自己的标题组，您应该通过编写您自己的定制来完成

例如，这就是您应该如何在包含ag网格的组件上定义ColumnDef，其中标题组称为“Personal”，自定义组件称为

customHeaderGroupComponent

this.columnDefs = [
  {
    headerName: "Personal",
    headerGroupComponent: "customHeaderGroupComponent",
    children: [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Age",
        field: "age"
      }]
  },
]

---

您可以在

上参考演示的其余部分以使文本居中，您需要手动自定义CSS文件中的组件，如下所示：

    ::ng-deep .ag-header-cell-label {
      display: flex;
      justify-content:center;

      ::ng-deep .ag-header-cell-text {
        display:flex;
        align-items:center;
      }
    }

对于背景色，您可以执行与上面类似的操作，只需使用：：ng deep选择要修改的类

---

希望这有帮助

嗨，文俊。这两种方法对我都适用（令人惊讶的是，从主scss文件，而不是从mycomponent.scss。一个小小的变化：我想显示几个标题组，它们的列标题采用不同的颜色（这样用户将立即看到不同的组）。这是怎么做到的？是的，这是因为Angular的视图封装工作方式。关于标题组自定义，您需要通过定义您自己的

headerGroupComponent

，并在那里定义您自己的CSS样式来扩展它。我将写一个简要的概述，您应该可以自己探索它？

    ::ng-deep .ag-header-cell-label {
      display: flex;
      justify-content:center;

      ::ng-deep .ag-header-cell-text {
        display:flex;
        align-items:center;
      }
    }