Угловой 4+ Обнаружение щелчка в Div или вложенных дочерних Div и отличить от других внешних Div

Question

Я видел много страниц Angular 2, которые перебирают иерархию nativeElements. Они не работают в Angular 4, 5, ... Мне нужно добавить директиву в 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. Я удостоверился, что я управляю @ последним Angular. (Это 5).

Любая помощь будет оценена. Заранее спасибо.

Answer 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, но трудно найти дополнительную информацию об этом.

В любом случае, вы всегда можете использовать консоль, чтобы выяснить, какой тип вашего event.target на самом деле, а затем бросить свой event.target для этого типа в коде. Тогда вы можете получить доступ ко всем тем свойствам, которые вы видите в консоли, без компиляции, которая не подходит:)