运行时期间的HIghlighting行

Question

我试图突出显示一个基于行的用户输入。我用的是角5，有角网格-角19.1.2.用gridOptions.getRowStyle设置样式会改变背景，但如果可能的话，我宁愿使用scss类。函数setHighlight()是通过(change)=setHighlight()在html文件中调用的。

setHighlight() {
const nextChronoId = this.getNextChronoDateId();
// this.highlightWithStyle(nextChronoId); // Working solution
this.highlightWithClass(nextChronoId);
const row = this.gridApi.getDisplayedRowAtIndex(nextChronoId);
this.gridApi.redrawRows({ rowNodes: [row]})
}

职能定义：

  highlightWithStyle(id: number) {
  this.gridApi.gridCore.gridOptions.getRowStyle = function(params) {
  if (params.data.Id === id) {
    return { background: 'green' }
   }
  }
 }

highlightWithClass(id: number) {
this.gridApi.gridCore.gridOptions.getRowClass = function(params) {
  if (params.data.Id === id) {
    return 'highlighted'
  }
 }
}

我的scss课程：

/deep/ .ag-theme-balham .ag-row .ag-row-no-focus .ag-row-even .ag-row-level0 .ag-row-last, .highlighted{
 background-color: green;
}

My rowNode 使用getRowClass不能正确地将突出显示的类应用于rowNode。在阅读(并尝试) this之后，我认为我的自定义scss类被ag类覆盖了.在使用rowClassRules时也会出现同样的问题。

问题，在正确设置我的自定义scss类时，如何使角5和ag网格一起工作？

随着调试器的使用，类将被拾取并附加到本地ag网格类中。

在rowComp.js中：

​

此外，屏幕转储从开发工具：

​

Answer 1

棱角的ViewEncapsulation是罪魁祸首。

首先要注意的是，所有的阴影穿刺术选择器，如/deep/或::ng-deep，都是或将被废弃。

据我所知，这有两个选择。

• 使用ViewEncapsulation.None
• 将highlighted类添加到全局样式表

设置ViewEncapsulation.None会带来自己可能的问题:所有组件样式都将成为全局可用的样式。

我建议采用备选案文二。

this answers很好地总结了它。

此外：

.ag-theme-balham .ag-row .ag-row-no-focus .ag-row-even .ag-row-level0 .ag-row-last

此选择器将永远不会匹配任何内容，应将其更改为

.ag-theme-balham .ag-row.ag-row-no-focus.ag-row-even.ag-row-level0.ag-row-last

ag-theme-balham之后的每个类都存在于同一个元素上。

使用您编写的选择器，您将表示一个层次结构。

希望这能有所帮助