代码编织梦想

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

<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

可以根据这个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);
        }
      });
    }
  }
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_32332433/article/details/110879897

快速判断数组中每个对象同一属性值是否相同(3种方法)-爱代码爱编程

此方法一般应用于全选多选的判断 1、findIndex() 方法 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。 let demoData = [ {checked:false,name:'royal'}, {checked:false,name:'royal'}, ] if(demoData.findInde

[Angular TypeScript报错]Cannot assign to read only property ‘outwardcolor‘ of object ‘[object Object]‘-爱代码爱编程

事情发生过程 用动态路由从一个组件传一个对象到另一个组件接收时发生的错误 源码: 对象 selected export interface selected { model?: string; outwardcolor?: string; outwardwheel?: string; interior?: string; featur

angular请求数据-爱代码爱编程

文章目录 一、Angular get 请求数据二、Angular post 提交数据三、angular jsonp 请求数据 一、Angular get 请求数据 在app.module.ts中引入HttpClientModule并注入Import{HttpClientModule } from ‘@angular/commob/http’;

2020/12/09 angular-cli的配置文件汇总-爱代码爱编程

文件目录 e2e test-》 端到端(end-to-end)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。 node_modules->node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。

记录Angular打包dist文件没有index.html的问题-爱代码爱编程

记录Angular打包dist文件没有index.html的问题 最近新学angular 踩了很多坑记录一下 angular打包方式: ng build --prod --no-extract-license ng build --prod --aot --no-extract-license ng build --prod --

angular 单元测试 karma+jasmine-爱代码爱编程

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、karma二、jasmine三、单元测试的好处1.改进实现的设计2.允许重构3.添加新功能而不会破坏任何内容4.测试使开发人员对他们的工作更有信心。 前言 学习angular单元测试 工欲善其事,必先利其器 一起来看看这个新东西 提示:以下是本篇文章正文内

react 文字跑马灯-爱代码爱编程

之前的一个 pc 端项目,有文字滚动的功能,找了下,没有合适的轮子,于是自己造了一个 目前只支持横向滚动 index.tsx import React, { useRef, useEffect, useState } from 'react' import './index.css' import styled from 'styled-compon

时间格式的处理集合 JavaScript-爱代码爱编程

1.从一个周一开始计算,某年有多少个周,周的开始日期和结束日期 function yearWeek(year) { var d = new Date(year, 0, 1); while (d.getDay() != 1) { d.setDate(d.getDate() + 1); } var to = n

百度地图apitypescript版本异步添加动态按钮-爱代码爱编程

1.创建地图: const map = this.map = new BMap.Map(this.mapElement.nativeElement, { minZoom: 5, maxZoom: 21, enableMapClick: true }); map.disableKeyboard(); map.disableDoubleClickZoom(

Angular项目中自定义滚动条的使用-爱代码爱编程

        在项目中使用到了自定义滚动条的功能,简单记录下心得,跟网易云音乐自定义播放器进度的拖动原理类似,只是自己在项目中并没有使用Rxjs的方式去实现。         自定义滚动条的核心逻辑是用dom模拟滚动条的样式,用鼠标事件来使滚动条跟着鼠标移动而移动,过程中也涉及到滚动条距离页面边距的计算。         首先,定义滚动条组件Scro

typeScript小记-爱代码爱编程

一、安装编译 安装ts npm install -g typescript 将ts文件编译为js文件 tsc hello.ts 运行 node hello.js 安装ts-node npm install -g ts-node 直接编译运行ts文件 ts-node hello.ts 二、实时编译 1、运行命令生成,tsconfig文

试问Session的销毁方式层数不穷?-爱代码爱编程

问题:Session的销毁方式到底有哪些? Session,作为我们离不开的后台的技术,它的出现主要是为了解决 Http 协议的无状态特点,用于解决用户状态的存储问题,而往往对于存储来说都会涉及到一个时间问题,下面我们来看看它的销毁方式到底有哪些。 销毁的方式 默认时间到期自己设定到期时间立刻失效关闭浏览器关闭服务器 案例实操 默认时间到期 当