Question

在Angular2中，如何在HostListener装饰器中定位元素？

@HostListener('dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('document: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('myElement: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('myElement.myClass: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

这两个第一部作品。我尝试过的任何其他事情都会引发EXCEPTION: Unsupported event target undefined for event dragstart

那么，我可以将它实现到目标元素吗？怎么样？

Answer 1

@HostListener()仅支持window，document和body作为全局事件目标，否则它仅支持组件主机元素。

Answer 2

由于接受的答案实际上并没有帮助解决问题，因此这是一个解决方案。

实现这一目标的更好方法是创建一个指令，这样您就可以将指令添加到您希望的任何元素中，并且侦听器只会触发此特定元素。

例如：

@Directive({
   selector: "[focus-out-directive]"
})
export class FocusOutDirective {
   @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>();

   @HostListener("focusout", ["$event"])
   public onListenerTriggered(event: any): void {
       this.onFocusOut.emit(true);
   }
}

然后，在您希望应用此侦听器的HTML元素上，只需添加指令选择器（在本例中为focus-out-directive），然后提供您希望在组件上触发的函数。

示例：

<input type='text' focus-out-directive (onFocusOut)='myFunction($event)'/>

Answer 3

我认为@hostliterner是全局侦听器的更好方法，但是如果您要定位某些元素，您可以这样做

在您的角度分量中

<div (event)="onEvent($e)"></div>

Answer 4

听一个元素：

import { Renderer2 } from '@angular/core';
...
constructor(private renderer: Renderer2) {}

// Get this.myElement with document.getElement... or ElementRef 

ngOnInit() {
  // scroll or any other event
  this.renderer.listen(this.myElement, 'scroll', (event) => {
  // Do something with 'event'
  console.log(this.myElement.scrollTop);
});

}

Answer 5

import { Directive, ElementRef, OnInit, Output, EventEmitter} from '@angular/core';

    @Directive({
          selector: '[checkClick]'
        })

        export class checkClickDirective implements OnInit {

        @Output() public checkClick = new EventEmitter();

        constructor(private _el: ElementRef) { }

        @HostListener('click', ['$event.target']) public onClick(targetElement) {

            const checkClick = this._el.nativeElement.contains(targetElement);

            (checkClick)?this.checkClick.emit(true):this.checkClick.emit(false);
          }
        }

Answer 6

正如Googs指出的那样，接受的答案确实回答了问题，但无助于找到解决方案。

我基于alex的答案，因为我需要一种方法来使用@HostListener中已有的功能来检索不同屏幕尺寸的通知列表。

例如，在我的应用中-通知页面在移动设备上有其自己的路线，但存在于平板电脑和上方屏幕尺寸的侧栏中，因此我无法在其中使用@HostListener，因为它只会在以下情况下触发我点击了整个页面的底部，而不是侧边栏。

相反，我抬起头来对自己感兴趣的<div>并附加了所需的内容。所以下面的代码：

attachListenerToContainer() {
    let elementToListenTo = this.ele ? this.ele : 'window';

    this.renderer.listen(elementToListenTo, 'scroll', (event) => {
      if(!this.reachedBottom) {
        if((getHeight(this.ele) + getScrollTop(this.ele)) >= getOffset(this.ele)) {
          this.reachedBottom = true;
          this.getNextNotificationsPage();
        }
      }
    });

    function getScrollTop(ele) {
      return ele ? ele.scrollTop : window.scrollY;
    }
    function getHeight(ele) {
      return ele ? ele.clientHeight : window.innerHeight;
    }
    function getOffset(ele) {
      return ele ? ele.scrollHeight : document.body.offsetHeight;
    }
  }

this.ele是我感兴趣的容器div，我在平板电脑及更高版本的ngAfterViewInit()生命周期挂钩中查找。如果找不到该元素，则改用窗口-有效模拟@HostListener

另外-在我的情况下，这就是我要查找的容器元素的方式：

this.ele = document.getElementsByClassName('notifications')[0];

Answer 7

在组件模板中

<div (event)="onMouseEnter()">
    <p>United States of America (mouseenter)</p>
</div>

<div (event)="onMouseOut()">
    <p>United States of America (mouseout)</p>
</div>

在班级组成部分

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-simpleevent',
  templateUrl: './simpleevent.component.html',
  styleUrls: ['./simpleevent.component.css']
})
export class SimpleeventComponent implements OnInit {
  @HostListener("mouseenter", ["$event"]) onMouseEnter(event: Event) {
    console.log(event.type);
  }

  @HostListener("mouseout", ["$event"]) onMouseOut(event: Event) {
    console.log(event.type);
    console.log(event.target)
  }
  constructor() { }

  ngOnInit() {
  }
}

Answer 8

您也可以在没有@hostlistener的情况下定位任何元素，并可以通过以下方式添加必要的事件

function change_color() {
  console.log('6666');
  document.body.style.backgroundColor = "green";
  alert("the color has changed to green!");
  console.log('6666');
  document.body.style.backgroundColor = "blue";
}

Angular2，HostListener，我该如何定位元素？我可以根据课程进行定位吗？

8 个答案: