0

我见过许多 Angular 2 页面循环遍历 nativeElements 的层次结构。它们在 Angular 4、5 中不起作用……我需要向“工作区”DIV 添加指令。将有其他 Div 作为工作空间的父级，而其他 Div 是嵌套到任何级别的子 DIV。该指令必须检测“工作区” div 或任何嵌套 div 的鼠标单击，我必须确定它实际上是嵌套子级或工作区——而不是工作区上方或工作区外的其他 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。我确保我正在运行@latest Angular。（这是 5 个）。

任何帮助将不胜感激。提前致谢。

4

1 回答 1

1

该event.target.parentNode引用没有通过编译器，因为编译器将其event.target视为EventTarget没有parentNode属性的 。为了告知编译器您的event.target真实身份，您需要使用类型断言来强制转换event.target它的真实类型，在您的情况下是HTMLElement：

const target = event.target as HTMLElement;

现在您将可以访问target.parentNode.

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

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

于 2018-02-14T19:36:47.433 回答