Angular 2+：检查 dom 元素是否是另一个 dom 元素的子元素答案

【问题标题】：Angular 2+: check if dom element is child of another dom elementAngular 2+：检查 dom 元素是否是另一个 dom 元素的子元素
【发布时间】：2018-11-27 12:30:40
【问题描述】：

我有以下代码：

import { Component, OnInit, OnDestroy } from "@angular/core";

@Component({
  selector: 'sidebar-component',
  templateUrl: './sidebar.component.html'
})

export class SideBarComponent implements OnInit, OnDestroy {

  constructor() {}

  ngOnInit(): void {
      window["isSideBarElement"] = this.isSideBarElement;
  }

  ngOnDestroy(): void {}

  private isSideBarElement(event): boolean{
    let element: HTMLElement = event.target as HTMLElement;
    //mising code check if the target of the event is a child of the component
  }

  private getDOMElement(): HTMLElement{
    return document.getElementsByTagName("sidebar-component")[0] as HTMLElement;
  }

}

在函数isSideBarElement中我想检查事件的目标是否是组件的子组件。

有什么建议吗？

【问题讨论】：

标签： angular typescript

【解决方案1】：

在构造函数中注入 ElementRef（表示对宿主 html 元素的引用）：

constructor(private eleRef: ElementRef) {}

在isSideBarElement 内部检查目标是否是它的后代：

private isSideBarElement(event): boolean{
  let element: HTMLElement = event.target as HTMLElement;
  return (this.eleRef.nativeElement as HTMLElement).contains(element)
}

【讨论】：

【解决方案2】：

将组件的 elementRef 作为父级，将 event.target 作为子级。

   isDescendant(pParent: any, pChild: HTMLElement) {
    try {
      while (pChild !== null) {
        if (pChild === pParent) {
          return true;
        } else {
          pChild = (pChild.parentNode as HTMLElement);
        }
      }
    } catch (e) {
      console.warn('isDescendant ', e);
    }
    return false;
  }

【讨论】：