javascript - 使用 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。