Angular 2+ : check if dom element is child of another dom element

Question

我有以下代码:

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 中，我想检查事件的目标是否是组件的子组件。

有什么建议吗？

Answer 1

在构造函数中注入(inject) 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)
}