Question

在我的角度应用程序中，我正在尝试一种解决方法，因为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。

使用vanilla JS将类添加到展开的行

1 个答案: