超过事件触发相同的方法

Question

<div class="someClass" (mouseout, mouseover)="someMethod()"></div> 

当我使用这种语法时我有错误

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '(mouseout,' is not a valid attribute name.

但是当以这种方式分割这个事件时，工作正常

<div class="someClass" (mouseout)="someMethod()" (mouseover)="someMethod()"</div>

如何在没有错误的情况下缩短语法？

Answer 1

好吧，从技术上讲，你可以在@HostListener和mouseover事件上用mouseout创建一个指令。

然后从中公开@Output属性以调用Component函数。

像这样的东西：

指示：

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

@Directive({
  selector: '[appListener]'
})
export class ListenerDirective {

  @Output() appListener: EventEmitter<any> = new EventEmitter();

  constructor() { }

  @HostListener('mouseover')
  onMouseOver(event) {
    this.appListener.emit(event);
  }

  @HostListener('mouseout')
  onMouseOut(event) {
    this.appListener.emit(event);
  }

}

和你的组件模板：

<div (appListener)="someFunction($event)">
  Here is some text in the DIV
</div >

---

这是你的参考的Working Sample StackBlitz。