Angular实现backdrop点击功能时读取ngFor生成元素父节点返回null求助

问题根因 #

你在isDescendant方法中碰到的ngFor生成元素父节点返回null的问题，和两个代码缺陷直接相关：

• 手动遍历父节点的逻辑没有兼容Angular插入的模板占位节点：*ngFor渲染时会在DOM中插入注释类型的占位标记，遍历这类节点时如果没有做类型适配，很容易出现节点解析中断、返回null的情况
• 重复实现DOM树层级判断逻辑，没有使用浏览器原生提供的兼容API，很容易漏掉动态元素的边界场景

修复方案 #

方案1：使用原生contains方法替换自定义遍历逻辑 #

完全删除手动遍历parentNode的代码，利用HTMLElement原生的contains方法做层级判断。该方法对所有静态元素、*ngFor/*ngIf等动态渲染元素的判断逻辑完全兼容，不需要手动处理节点遍历：

onMouseDown(event: MouseEvent) {
  // 自动判断点击目标是否在backdrop元素范围内，兼容所有动态生成节点
  const isClickOnBackdrop = this.elRef.nativeElement.contains(event.target);
  if (isClickOnBackdrop) {
    this.state = this.state === 'OPEN' ? 'CLOSE' : 'OPEN';
    this.toggle.emit();
    return;
  }
}

注：contains方法会自动向上递归遍历DOM树，不管目标元素是静态渲染还是*ngFor循环生成，只要在DOM结构上存在包含关系，都能准确返回结果，不会出现遍历中断的问题。

方案2：保留手动遍历逻辑时增加节点适配 #

如果因特殊场景必须保留自定义的isDescendant方法，需要在遍历过程中适配非元素类型的节点（包括文本节点、Angular插入的注释占位节点），避免遍历逻辑中断：

isDescendant(parent: HTMLElement, child: EventTarget | null) {
  let currentNode = child as Node | null;
  while (currentNode) {
    if (currentNode === parent) {
      return true;
    }
    // 逐层级向上遍历，自动兼容所有节点类型
    currentNode = currentNode.parentNode;
  }
  return false;
}

常见踩坑提醒 #

• 不要直接将event.target强转为HTMLElement：点击元素内的纯文本内容时，事件目标实际是文本节点，而非元素节点，原生的contains方法本身支持这类节点的判断，不会出现报错
• 不要将*ngFor生成的元素视为独立于DOM树的特殊节点：*ngFor只是模板渲染指令，生成的元素和静态元素的DOM结构完全一致，出现父节点读取为null的问题，本质是遍历逻辑没有覆盖注释、文本等特殊节点的解析规则

内容的提问来源于stack exchange，提问作者Jonaz