Angular 多个事件触发相同的方法

但当以这种方式拆分此事件时，效果很好

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

---

从技术上讲，您可以在
mouseover
和
mouseout
事件上创建一个指令

然后从中公开一个
@Output
属性来调用组件函数

大概是这样的：

指令：

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

import{Directive，HostListener，Output，EventEmitter}来自“@angular/core”；
@指示({
选择器：“[appListener]”
})
导出类ListenerDirective{
@Output（）appListener:EventEmitter用于您的ref

你不能，这种语法不受支持，也没有简单的方法来缩短它。你可以在组件代码（类型脚本）中做类似的事情，你可以在一个循环中注册多个事件，但这比你在html中编写的代码要多得多。
<div class="someClass" (mouseout)="someMethod()" (mouseover)="someMethod()"</div>

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 >