使用 vanilla JS 将类添加到扩展行

Question

在我的 Angular 应用程序中，我正在尝试一种解决方法，因为 ag-Grid api getRowClass() 没有按预期工作。我需要做的就是在展开的行中添加一个 css 类，并在该行折叠时将其删除。

使用ag-Grid api的原始方法不起作用如下：

setRowNode(params) {
    this.gridOptions.getRowStyle = (params) => {
        if(params.node.expanded) {
            return { background: 'red' };
        }
    }
}  

理想情况下，我将能够选择 DOM 并向其附加一个类。我用一些 JQuery 尝试了这个并且它有效，但出于显而易见的原因，我不想在这个应用程序中使用 JQuery。我按照这些思路写了一些东西：

$('.ag-row[row="'+params.node.id+'"]',self.api.grid.gridPanel.eBodyContainer).addClass('ag-row-focus');

我将如何使用 vanilla JS 来满足这个要求？

Answer 1

您可以通过创建自定义指令来做到这一点，例如：

//row-focus.directive.ts

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appRowFocus]' // you can target classes, id etc.: '.grid-Holdings' for example
})
export class RowFocusDirective {
  @HostBinding('class.ag-row-focus') isFocused = false;

  @HostListener('click') toggleOpen() {
    this.isFocused = !this.isFocused;
  }
}

在您的模块上导入此指令，然后将该指令附加到您的元素：

// your-component.component.ts :

<div class="row" appRowFocus>

这些元素将在点击时切换ag-row-focus。您可以为其他事件添加不同的@HostListener。