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

Question

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

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

什么有效？具有所需行为的列由实现 ICellRendererAngularComponent interface. There I can inject the ElementRef and on the lifecycle hook AfterContentChecked 的自定义单元格渲染器组件渲染我检查 parents' parent 的 css-class '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 class '.ag-row-悬停在每张支票上。或者有一个带有 css-selector '.ag-row-hover' 的指令存在或不存在。有人知道如何改进我现有的解决方案吗？

Answer 1

您实际上只需使用 CSS 即可实现所需的行为，无需注入 ElementRef 或通过 Angular 生命周期回调执行任何操作。

也就是说，您的自定义渲染器可能看起来像这样：

@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() 中执行的操作。

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

Render additional info in cell when row is hovered in ag-grid

css

performance

angular-directive

ag-grid

angular