Angular 4+ 检测 Div 或嵌套子 Div 中的点击，并与 Div 之外的其他内容区分开来

Question

我见过许多 Angular 2 页面循环遍历 nativeElements 的层次结构。它们不适用于 Angular 4、5、... 我需要向 "workspace" DIV 添加一个指令。将有其他 Div 作为工作区的父级，其他是嵌套到任何级别的子级 DIV。该指令必须检测 "workspace" div 或任何嵌套 div 的鼠标单击，我必须确定它实际上是嵌套子项或工作区——而不是某些other div 工作区上方或工作区外。

这来自网络上的众多示例之一：

    import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[shMonitorInfoClicks]'
})
export class MonitorInfoClicksDirective {
  public elementRef;

  constructor(private myElement: ElementRef) {
    this.elementRef = myElement;
  }

  @HostListener('document:click', ['$event'])
  public onClick(event: Event): void {
    let clickedComponent = event.target;
    let inside = false;
    do {
      if (clickedComponent === this.elementRef.nativeElement) {
        inside = true;
        break;
      } else {
        clickedComponent = clickedComponent.parentNode;  <<<<====== see below
      }
    } while (clickedComponent);
    if(inside) {
      console.log('inside');
    } else {
      console.log('outside');
    }
  }
}

测试HTML:

<div>
  This is outside the workspace
</div>
<div shMonitorInfoClicks  [ngStyle]="{'height': '200px', 'width': '300px', 'border': '1px solid red'}">
  This is the workspace
  <div [ngStyle]="{'height': '100px', 'width': '100px', 'border': '1px solid green'}">
    A workspace child
  </div>
</div>

当我在 Chrome 调试器中暂停时，我能够使用控制台使 parentNode 或 parentElement 工作。但是，我无法通过 Typescript/Angular CLI。我确保我是运行 @最新的 Angular。（是 5）。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

event.target.parentNode 引用没有通过编译器，因为编译器将 event.target 视为 EventTarget，它没有 parentNode 属性。为了通知编译器你的 event.target 到底是什么，你需要 use a type assertion 来转换 event.target 它是真实类型，在你的情况下是 HTMLElement:

const target = event.target as HTMLElement;

现在您可以访问 target.parentNode。

您能够在控制台中看到它的原因是因为它在运行时打印出 event.target（不包括类型），但是 Angular 的事件对象的 target 属性 returns 别的。您可以在此处查看一点更多信息：https://angular.io/guide/user-input#type-the-event，但很难找到更多信息。

无论如何，您始终可以使用控制台确定您的 event.target 的类型，然后在代码中将您的 event.target 转换为该类型。然后你可以访问你在控制台中看到的所有这些属性，而无需编译器匹配 :)

Angular 4+ 检测 Div 或嵌套子 Div 中的点击，并与 Div 之外的其他内容区分开来

Angular 4+ Detect click in Div or nested child Divs and distinguish from other outside Divs

angular

elementref