当行悬停在 ag-grid 中时，在单元格中呈现附加信息

Posted 2023-02-22

【中文标题】当行悬停在 ag-grid 中时，在单元格中呈现附加信息

【英文标题】：Render additional info in cell when row is hovered in ag-grid

【发布时间】：2020-04-28 21:54:11

【问题描述】：

我正在使用 angular (^8.2.14) 和 ag-grid-community (^20.1.0)。

我尝试实现以下效果：当用户将鼠标悬停在特定行时，其中一列会显示一个可以点击的附加按钮。

什么有效？ 具有所需行为的列由实现 ICellRendererAngularComponent 接口的自定义单元格渲染器组件渲染。在那里我可以注入 ElementRef 并在生命周期钩子AfterContentChecked 上检查父级的 css 类“ag-row-hover”，如果它在那里，我将在渲染器组件中显示这个附加按钮。

custom-cell.component.ts

@Component(
  selector: 'app-custom-cell',
  template: `
      <ng-container *ngIf="hovered; else notHovered">form.value * form.value
        <button (click)="doStuff(form.value)">show root</button></ng-container>
      <ng-template #notHovered>form.value + form.value</ng-template>
  `,
)
export class CustomCellComponent implements ICellRendererAngularComp, AfterContentChecked 
  form: FormControl;
  params: ICellRendererParams;
  hovered = false;

  constructor(private elementRef: ElementRef) 
  

  doStuff(val) 
    alert(val);
  

  ngAfterContentChecked() 
    this.hovered = (this.elementRef.nativeElement as htmlElement)
      .parentElement
      .parentElement
      .classList.contains('ag-row-hover');
  

源代码在github

我想改进什么？ 我想提高性能，而不是对这种行为进行明确的检查。我宁愿有一个带有 css-selector '.ag-row' 的指令，我可以将它注入到 ICellRendererAngularComponent 中，然后在每次检查时检查 css 类 '.ag-row-hover'。或者有一个带有 css-selector '.ag-row-hover' 的指令，它存在或不存在。任何人都知道如何改进我现有的解决方案？

【参考方案1】：

您实际上可以仅使用 CSS 实现所需的行为，无需注入 ElementRef 或通过 Angular Lifecycle Callbacks 执行任何操作。

话虽如此，您的自定义渲染器可能看起来像这样：

@Component(
  selector: "app-custom-cell",
  template: `
    <span style="color: red;">
      <div class="visible-on-hover">
         form.value * form.value 
        <button (click)="doStuff(form.value)">show root</button>
      </div>
      <div class="hidden-on-hover"> form.value + form.value </div>
    </span>
  `
)
export class CustomCellComponent
  implements ICellRendererAngularComp 
  form: FormControl;
  params: ICellRendererParams;

  constructor() 

  doStuff(val) 
    alert(val);
  

//... other stuff 

在你的styles.scss（或者更合适的地方，只是make sure the styles apply）中，添加这些规则：

div.visible-on-hover 
  display: none;


.ag-row-hover 
  div.visible-on-hover 
    display: block;
  

  div.hidden-on-hover 
    display: none;
  

从概念上讲，浏览器渲染引擎会执行您在 ngAfterContentChecked() 中所做的操作。

【讨论】：

感谢您提供此线索。它解决了有关使用 Angular 的生命周期钩子的问题，并且可能是一种更好的解决方案 - 性能方面。