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，它不是我的，所以在那里没有要使用的组件CSS。

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

下一部分是使用属性headerHeight

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

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

原因在于渲染视图时动态地用top样式定义了内容区域；通过::ng-deep调整标题高度不会动态向下移动内容区域的top，因为它是由 headerHeight属性...如果未定义，则默认值为25px，因此内容区域的top也是25px。
不提及内容区域的z-index导致其与标题，当您使用::ng-deep更改高度时，..因此您不知道::ng-deep是否确实有效……在视觉上就是……标题在内容区域下延伸。

很抱歉，但这将尽您所能...调整所有元素，通过DOM操作基于动态标头高度将top等向下移动，我担心它会变得太丑陋。。，如果您需要动态调整页眉高度，这是一个显示限位器...那么最好探索其他选项来代替ag-grid。

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

Answer 2

要获得预期结果，请在该特定列headerName的列定义中使用以下使用换行符- br 的选项

{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}

Answer 3

Angular具有封装功能。

但是ag-grid不在乎封装。因此我们需要全局设置.ag-header-cell-label和.ag-header-cell-text。

我们在Component属性中设置ViewEncapsulation.None并编写css或scss，这可以全局设置css。

全局css应用于所有ag-grid组件。如果您只想将.ag-header-cell-label和.ag-header-cell-text设置为一个网格组件，请在gridOptions上设置headerClass

this.gridOptions = {
  defaultColDef: {
    headerClass: 'myfunc-default-header'
  },
  headerHeight:75
};

然后编写这样的scss文件。

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

这只能应用于.ag-header-cell-label内的.ag-header-cell-text和my-func-deafult-header。
因此我们只能应用一个农业网格组件。

如何使用angular

3 个答案: