javascript - 如何使用 Angular 将列标题包装在 ag-grid 中

Question

我有一些栏目有四个词，即交易前跟进、交易后跟进，其中一些栏目有三个词。我尝试了下面的 css 将文本换行到多行。

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
  white-space: normal;
  overflow-wrap: break-word;
}

HTML

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

但列标题保持不变。我想将列标题文本换行到多行。有办法做到这一点吗？

注意:我可以使用 cellStyle: {'white-space': 'normal'}

来包装内容

{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},

但我想包装标题。

Answer 1

请查看以下 stackblitz 示例。

https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css

在全局样式表中，我应用了以下...你可以在你的组件 css 中使用 ::ng-deep，这是我用 ag-grid 找到的第一个 stackblitz fork 并且不是我的，所以没有组件 css 可以使用。

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

下一 block 是使用属性 headerHeight

this.gridOptions = <GridOptions>{
          headerHeight:75,

不幸的是，这部分是不可避免的……它也不允许您根据自动换行要求使标题高度动态化。

• 原因是内容区域在渲染 View 时动态定义了top样式；通过 ::ng-deep 调整标题高度不会动态将内容区域的 top 向下移动，因为它是由headerHeight 属性...如果未定义，默认值为 25px，因此内容区域的 top 也是 25px。
• 不要提到内容区域的 z-index 导致它与当您使用 ::ng-deep 更改高度时的 header .. 所以您不知道 ::ng-deep 是否真的有效...视觉上是.. . 因为标题在内容区域下方延伸。

抱歉这么说，但这将尽可能接近......调整所有元素，根据动态标题高度通过 DOM 操作向下移动 top 等我担心会太过分丑陋的......如果你需要标题高度动态到这一点，这是一个展示塞子......最好探索其他选项作为 ag-grid 的替代品。

https://www.ag-grid.com/javascript-grid-column-header/#headerHeight