angular指令操作dom节点修改样式属性等

在父节点不能直接取得时，通过确定的孙孙子节点不断查找父节点来改变一些样式

<a appChangeZIndex>加入指令的节点</a>
//以下为指令里的代码：
import {
      Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
     
  selector: '[appChangeZIndex]'
})
export class ChangeZIndexDirective {
     

  constructor(
    private el: ElementRef,
    private render: Renderer2
  ) {
     
  }

  @HostListener('click', ['$event']) onClick(event: MouseEvent) {
     
    this.changeOtherZIndex();
    this.changeCurrentZIndex();
  }

  private changeCurrentZIndex() {
     
    let currentNode = this.el.nativeElement;
    let parentNode = {
      className: 'a' };
    while (parentNode.className !== 'datatable-row-right datatable-row-group') {
     
      parentNode = this.render.parentNode(currentNode);
      currentNode = parentNode;
    }
    currentNode.style.zIndex = '10';
  }

  private changeOtherZIndex() {
     
    let currentNode = this.el.nativeElement;
    let parentNode = {
      className: 'a' };
    while (parentNode.className !== 'datatable-scroll') {
     
      parentNode = this.render.parentNode(currentNode);
      currentNode = parentNode;
    }
    parentNode['childNodes'].forEach((item: Node) => {
     
      if (item.nodeType === 1) {
     
        item['childNodes'].forEach((element: Node) => {
     
          if (item.nodeType === 1) {
     
            element['childNodes'].forEach((node: any) => {
     
              if (node.className === 'datatable-row-right datatable-row-group') {
     
                node.style.zIndex = '9';
              }
            });
          }
        });
      }

    });
  }

}

注：
Renderer2 用来查找父节点
ElementRef 可以取得当前节点
HostListener(‘click’, [’$event’]) onClick(event: MouseEvent) 打印该event可以得知该节点下的内容

可以根据这个event里的东西得知node节点的属性

另：
原生dom修改方式如下

    const cells = document.getElementsByClassName('datatable-row-right datatable-row-group');
    for (let i = 0, len = cells.length; i < len; i++) {
     
      console.changeZIndexlog('ddd', cells[i]['style'].transform);
      const transform = cells[i]['style'].transform;
      if (transform) {
     
        cells[i]['style'].transform = null;
        cells[i]['style'].position = 'fixed';
        cells[i]['style'].right = '0';
      }
  cells[i].setAttribute('style', 'transform: null');
    }
    ```

优化上边的指令代码
```ts
import {
      Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
     
  selector: '[appChangeDropdownZIndex]'
})
export class ChangeDropdownZIndexDirective {
     

  constructor(
    private el: ElementRef,
    private render: Renderer2
  ) {
     
  }

  @HostListener('click', ['$event']) onClick(event: MouseEvent) {
     
    console.log('event', event);
    this.changeOtherRowsZIndex();
    this.changeCurrentRowZIndex();
  }

  // 使得当前class为datatable-row-right datatable-row-group的节点的zIndex为10
  private changeCurrentRowZIndex() {
     
    let currentNode = this.el.nativeElement;
    // 获取到该下拉框所在的class为datatable-row-right datatable-row-group的节点
    while (!(currentNode.className === 'datatable-row-right datatable-row-group' && currentNode.nodeName === 'DIV')) {
     
      currentNode = this.render.parentNode(currentNode);
      // 避免currentNode不存在引发报错
      if (!currentNode) {
     
        break;
      }
    }
    // 将该节点的z-index置为10
    currentNode.style.zIndex = '10';
  }


  // 使得所有class为datatable-row-right datatable-row-group的节点的zIndex为9
  private changeOtherRowsZIndex() {
     
    let parentNode = this.el.nativeElement;
    // 获取class为datatable-scroll的节点，
    while (!(parentNode.className === 'datatable-scroll' && parentNode.nodeName === 'DATATABLE-SCROLLER')) {
     
      parentNode = this.render.parentNode(parentNode);
      // 避免parentNode不存在引发报错
      if (!parentNode) {
     
        break;
      }
    }
    this.findChildNode(parentNode, 3);
  }

  findChildNode(parentNode: any, num: number) {
     
    // nodeType为1是正常显示的节点，排除掉ngIf为false之类的没有子节点的情况
    // num的值代表递归的层级，我们通过观察datatable-scroll下三层为我们想要的class为‘datatable-row-right datatable-row-group’节点
    if (parentNode.nodeType === 1 && num > 0) {
     
      num--;
      parentNode['childNodes'].forEach((item: any) => {
     
        if (item.className === 'datatable-row-right datatable-row-group' && item.nodeName === 'DIV') {
     
          item.style.zIndex = '9';
        } else {
     
          this.findChildNode(item, num);
        }
      });
    }
  }
}